feat 高德地图插件改用Amap-Vue

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "@amap/amap-vue": "^2.0.13",
     "axios": "^0.21.4",
     "element-ui": "^2.15.5",
     "moment": "^2.29.1",
@@ -17,7 +18,6 @@
     "qrcodejs2": "0.0.2",
     "qs": "^6.10.1",
     "vue": "^2.5.2",
-    "vue-amap": "^0.5.10",
     "vue-router": "^3.0.1",
     "vuex": "^3.6.2"
   },

src/components/Home.vue

@@ -281,9 +281,10 @@ export default {
           } else {
             this.orderList = this.orderList.concat(newList);
           }
-          console.log("deliveryList", deliveryList);
+          console.log("1111", deliveryList);
           deliveryList.forEach((item) => {
             this.orderList = this.orderList.filter((v) => {
+              console.log('2222',v,item);
               return v.id !== item;
             });
           });

src/components/orderComponents/orderAMap.vue

@@ -24,10 +24,9 @@
         </div>
       </div>
     </el-form>
-    <el-amap ref="map" vid="container" :zoom="zoom" :plugins="plugin" :center="center" style="height: 600px;" class="amap-demo">
-      <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="marker.icon"></el-amap-marker>
-      <el-amap-text v-for="text in texts" :key="text.id" :text="text.text" :offset="text.offset" :position="text.position" :events="text.events"></el-amap-text>
-    </el-amap>
+    <amap ref="map" :zoom="zoom" :center="center" style="height: 600px;" class="amap-demo">
+      <amap-marker v-for="(marker,index) in markers" :key="index" :offset="marker.offset" :position="marker.position" :icon="marker.icon" :label="marker.label" />
+    </amap>
   </el-dialog>
 </template>
 
@@ -114,21 +113,26 @@ export default {
       });
     },
     init(data, mapData) {
+      let orderDistance =
+        mapData.orderDistance > 1000
+          ? (mapData.orderDistance / 1000).toFixed(1) + "公里"
+          : mapData.orderDistance + "米";
       let sendM = {
         id: 1,
         position: [data.sendLng, data.sendLat],
         icon: "/static/image/map-fa.png",
+        offset: [10, -50],
+        label: {
+          content: `商家距离目的地${orderDistance}`,
+          direction: "top",
+        },
       };
       let receiptM = {
         id: 2,
         position: [data.receiptLng, data.receiptLat],
         icon: "/static/image/map-shou.png",
       };
-      let riderM = {
-        id: 3,
-        position: [mapData.shipperLng, mapData.shipperLat],
-        icon: "/static/image/map-rider.png",
-      };
+
       // 中心点
       this.center = [
         ((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6),
@@ -137,55 +141,37 @@ export default {
       // marker标记
       this.markers = [sendM, receiptM];
       if (mapData.shipperLng && mapData.shipperLat) {
-        this.markers.push(riderM);
-      }
-      this.$nextTick(() => {
-        this.$refs.map.$$getInstance().setFitView();
-      });
-
-      let orderDistance =
-        mapData.orderDistance > 1000
-          ? (mapData.orderDistance / 1000).toFixed(1) + "公里"
-          : mapData.orderDistance + "米";
-      this.texts = [
-        {
-          id: 4,
-          position: [data.sendLng, data.sendLat],
-          text: `商家距离目的地${orderDistance}`,
-          offset: [10, -50],
-        },
-      ];
-      if (mapData.shipperLng && mapData.shipperLat && mapData.shipperDistance) {
         let distance =
           mapData.shipperDistance > 1000
             ? (mapData.shipperDistance / 1000).toFixed(1) + "公里"
             : mapData.shipperDistance + "米";
-        this.texts.push({
-          id: 5,
+        let riderM = {
+          id: 3,
           position: [mapData.shipperLng, mapData.shipperLat],
-          text:
-            data.buttonStatus === 2
-              ? `骑手距离商家${distance} | 预计${mapData.riderArriveMinute}分钟后到店`
-              : data.buttonStatus === 3
-              ? `骑手距离目的地${distance} | 预计${mapData.estimateArriveTime}送达`
-              : "",
+          icon: "/static/image/map-rider.png",
           offset: [15, -50],
-        });
+          label: {
+            content:
+              data.buttonStatus === 2
+                ? `骑手距离商家${distance} | 预计${mapData.riderArriveMinute}分钟后到店`
+                : data.buttonStatus === 3
+                ? `骑手距离目的地${distance} | 预计${mapData.estimateArriveTime}送达`
+                : "",
+            direction: "top",
+          },
+        };
+        this.markers.push(riderM);
       }
-
-      // 绘制折线
-      // this.polyline.path = [
-      //   new AMap.LngLat(mapData.receiptLng, mapData.receiptLat),
-      //   new AMap.LngLat(mapData.sendLng, mapData.sendLat),
-      //   new AMap.LngLat(mapData.shipperLng, mapData.shipperLat),
-      // ];
+      this.$nextTick(() => {
+        console.log('显示地图',this.$refs.map.$map);
+        this.$refs.map.$map.setFitView();
+      });
     },
     setDialogStatus(data) {
       this.dialogTableVisible = true;
       this.loading = true;
       getMapData({ orderId: data.id }).then((res) => {
         if (res.code === 200) {
-          console.log(11111, res.data);
           this.loading = false;
           this.init(data, res.data);
         } else {
@@ -213,14 +199,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/deep/ .amap-overlay-text-container {
+/deep/ .amap-marker-label {
   font-size: 12px;
   background: #fc7200;
   color: #fff;
   padding: 4px 8px;
   border: none;
 }
-/deep/ .amap-overlay-text-container:before {
+/deep/ .amap-marker-label:before {
   content: "";
   width: 0;
   height: 0;

src/main.js

@@ -10,8 +10,7 @@ import store from './store/index.js';
 import axios from 'axios'
 Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
 
-import VueAMap from 'vue-amap';
-
+import AmapVue from '@amap/amap-vue';
 
 import { get, post, postJson } from './api/http'
 
@@ -24,26 +23,10 @@ Vue.prototype.$get = get;
 Vue.prototype.$post = post;
 Vue.prototype.$postJson = postJson;
 
-Vue.use(VueAMap);
-
+AmapVue.config.key = '610161977d2e2632eb34aff3e88a079f';
+Vue.use(AmapVue);
 Vue.use(Elementui)
 
-VueAMap.initAMapApiLoader({
-  key: '610161977d2e2632eb34aff3e88a079f',
-  plugin: ["AMap.Autocomplete", //输入提示插件
-    "AMap.PlaceSearch", //POI搜索插件
-    "AMap.Scale", //右下角缩略图插件 比例尺
-    "AMap.OverView", //地图鹰眼插件
-    "AMap.ToolBar", //地图工具条
-    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
-    "AMap.PolyEditor", //编辑 折线多，边形
-    "AMap.CircleEditor", //圆形编辑器插件
-    "AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
-  ],
-  v: '1.4.4',
-  uiVersion: '1.0'
-})
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',