地图优化

src/views/task-manage/components/MapComp.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="mapComp" id="mapComp"></div>
-  <input id="pickerInput" type="text" placeholder="输入关键字选取地点" />
+  <div id="mapComp" class="mapComp" />
+  <input id="pickerInput" type="text" placeholder="输入关键字选取地点">
 
 </template>
 
@@ -8,42 +8,41 @@
 import GMap from '@/utils/map/GMap'
 
 const emit = defineEmits(['mapEmit'])
+let marker = null
 
 GMap.then((AMap) => {
-  let map = new AMap.Map('mapComp', {
+  const map = new AMap.Map('mapComp', {
     zoom: 13,
-    center: [118.773319, 31.828123],
-  });
+    center: [118.773319, 31.828123]
+  })
 
   // 添加缩放工具
-  const toolbar = new AMap.ToolBar();
-  map.addControl(toolbar);
+  const toolbar = new AMap.ToolBar()
+  map.addControl(toolbar)
 
   // 搜索
-  AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
-
+  AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
     const poiPicker = new PoiPicker({
       input: 'pickerInput'
-    });
+    })
 
     poiPicker.on('poiPicked', ({ item }) => {
-
-      let inp = document.getElementById('pickerInput');
-      inp.value = item.name;
-
-      const marker = new AMap.Marker({
-        title: item.address
-      });
-
-      marker.setMap(map);
-      marker.setPosition(item.location);
-      map.setCenter(marker.getPosition());
-
-      emit('mapEmit', item);
-
+      const inp = document.getElementById('pickerInput')
+      inp.value = item.name
+      map.setCenter(item.location) // 移动到中心位置
+    })
+  })
+  map.on('click', ({ lnglat }) => {
+    console.log(lnglat)
+    if (marker) map.remove(marker) // 只取一次maker点
+    marker = new AMap.Marker({
+      position: new AMap.LngLat(lnglat.lng, lnglat.lat),
+      offset: new AMap.Pixel(-10, -10),
+      icon: '//vdata.amap.com/icons/b18/1/2.png'
     })
-  });
-  
+    map.add(marker)
+    emit('mapEmit', lnglat)
+  })
 }).catch(e => console.log(e))
 
 </script>
@@ -70,4 +69,4 @@ GMap.then((AMap) => {
 .amap_lib_placeSearch .poi-more {
   display: none !important;
 }
-</style>
+</style>

src/views/task-manage/components/UserModal.vue

@@ -168,11 +168,12 @@ export default defineComponent({
       data.userForm.imageStatus = status
     }
 
+    let Gmap = null
     let geocoder = null
+    let AMaps = null
     // 地图
     GMap.then((AMap) => {
-      let Gmap = null
-
+      AMaps = AMap
       // 坐标求地址
       geocoder = new AMap.Geocoder()
 
@@ -224,9 +225,7 @@ export default defineComponent({
     const endVal = ref(null)
 
     // 起点地图 确定事件
-    const startHandle = e => {
-      const { location: { lat }} = e
-      const { location: { lng }} = e
+    const startHandle = ({ lng, lat }) => {
       geocoder.getAddress([lng, lat], function(status, result) {
         if (status === 'complete' && result.info === 'OK') {
           startVal.value = result.regeocode.formattedAddress
@@ -234,11 +233,10 @@ export default defineComponent({
           data.userForm.startLatitude = String(lat)
         }
       })
+      mapHandle('起点', [lng, lat])
     }
     // 终点地图 确定事件
-    const endHandle = e => {
-      const { location: { lat }} = e
-      const { location: { lng }} = e
+    const endHandle = ({ lng, lat }) => {
       geocoder.getAddress([lng, lat], function(status, result) {
         if (status === 'complete' && result.info === 'OK') {
           endVal.value = result.regeocode.formattedAddress
@@ -246,6 +244,18 @@ export default defineComponent({
           data.userForm.endLatitude = String(lat)
         }
       })
+      mapHandle('终点', [lng, lat])
+    }
+    // 地图marker点
+    const mapHandle = (type, arr) => {
+      const marker = new AMaps.Marker({
+        title: type,
+        icon: '//vdata.amap.com/icons/b18/1/2.png'
+      })
+
+      marker.setMap(Gmap)
+      marker.setPosition(arr)
+      Gmap.setCenter(marker.getPosition())
     }
 
     function handleConfirm() {