customMap.vue 1009 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view>
  3. <map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude" :markers="data.covers"> </map>
  4. </view>
  5. </template>
  6. <script setup>
  7. import {
  8. reactive,
  9. } from "vue"
  10. import myIcon from "@/static/images/common/markIcon.png"
  11. import {onLoad} from "@dcloudio/uni-app"
  12. const data = reactive({
  13. id: 0, // 使用 marker点击事件 需要填写id
  14. title: 'map',
  15. latitude: 39.909,
  16. longitude: 116.39742,
  17. covers: [{
  18. latitude: 39.909,
  19. longitude: 116.39742,
  20. iconPath: myIcon,
  21. }]
  22. })
  23. function initLocation() {
  24. uni.getLocation({
  25. type: 'gcj02',
  26. success: function (res) {
  27. data.longitude = res.longitude;
  28. data.latitude = res.latitude;
  29. data.covers[0].longitude = res.longitude;
  30. data.covers[0].latitude = res.latitude;
  31. console.log('当前位置的经度:' + res.longitude);
  32. console.log('当前位置的纬度:' + res.latitude);
  33. }
  34. });
  35. }
  36. onLoad(() => {
  37. initLocation();
  38. })
  39. </script>
  40. <style>
  41. </style>