update

src/views/home/AMap.vue

@@ -10,30 +10,31 @@
                 :key="index"
                 :label="item.name"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
-            <el-amap class="amap-box"
-                     :vid="'amap-vue'"
-                     :amap-manager="amapManager"
-                     :zoom="zoom"
-                     :center="mapCenter"
-                     :plugin="plugins"
-                     :events="mapEvents">
+            <el-amap
+              class="amap-box"
+              :vid="'amap-vue'"
+              :amap-manager="amapManager"
+              :zoom="zoom"
+              :center="mapCenter"
+              :plugin="plugins"
+              :events="mapEvents"
+            >
               <el-amap-marker
                 v-for="(marker, index) in markers"
                 :key="index"
                 :position="marker.position"
                 :label="marker.label"
                 :events="markerEvents"
-                :extData="marker.extData"
-              ></el-amap-marker>
+                :ext-data="marker.extData"
+              />
             </el-amap>
           </div>
         </el-card>
       </el-row>
     </el-col>
-<!--    <el-col :md="12">
+    <!--    <el-col :md="12">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div class="text item amap-wrapper">
@@ -54,25 +55,25 @@
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <el-button
-            type="text"
             v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
             v-clipboard:success="onCopy"
             v-clipboard:error="onCopyError"
+            type="text"
           >GoogleEarth 坐标</el-button>
         </div>
         <div class="text item">
           <el-image v-if="markerInfo.photoUrl !== null" :src="markerInfo.photoUrl" min-width="40" height="30" />
           <br>
           <label>
-            商品 <span v-text="markerInfo.itemId"/>
+            商品 <span v-text="markerInfo.itemId" />
           </label>
           <br>
           <label>
-            SKU <span v-text="markerInfo.sku"/>
+            SKU <span v-text="markerInfo.sku" />
           </label>
           <br>
           <label>
-            评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
+            评论 <span style="color: blue" v-text="markerInfo.replyContent" />
           </label>
           <br>
           <!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
@@ -87,7 +88,6 @@
 <script>
 import Vue from 'vue'
 import VueAMap from 'vue-amap'
-import { lazyAMapApiLoaderInstance } from 'vue-amap'
 Vue.use(VueAMap)
 VueAMap.initAMapApiLoader({
   key: 'your amap key',
@@ -95,11 +95,13 @@ VueAMap.initAMapApiLoader({
   // 默认高德 sdk 版本为 1.4.4
   v: '1.4.15'
 })
+
+import { lazyAMapApiLoaderInstance } from 'vue-amap'
 const amapManager = new VueAMap.AMapManager()
-import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
+import { getMapMarkers, getMarkerInfo } from '@/api/map'
 
 export default {
-  data () {
+  data() {
     return {
       amap: null,
       plugins: ['Scale'],
@@ -119,7 +121,7 @@ export default {
             }
           }
           this.getMarkerInfoWrapper(item)
-        },
+        }
       },
       /* 海量点 */
       massMarks: null,
@@ -175,20 +177,20 @@ export default {
       this.amap = o
       lazyAMapApiLoaderInstance.load().then(() => {
         var styleObject = {
-          url: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',  // 图标地址
-          size: new AMap.Size(11,11),      // 图标大小
-          anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
+          url: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 图标地址
+          size: new AMap.Size(11, 11), // 图标大小
+          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
         }
 
         const massMarks = new AMap.MassMarks([], {
-          zIndex: 5,  // 海量点图层叠加的顺序
-          zooms: [3, 10],  // 在指定地图缩放级别范围内展示海量点图层
-          style: styleObject  // 设置样式对象
-        });
+          zIndex: 5, // 海量点图层叠加的顺序
+          zooms: [3, 10], // 在指定地图缩放级别范围内展示海量点图层
+          style: styleObject // 设置样式对象
+        })
 
-        //将海量标点添加至地图实例
+        // 将海量标点添加至地图实例
         massMarks.setMap(o)
-        //添加点击事件
+        // 添加点击事件
         massMarks.on('click', (e) => {
           console.log('massMark 点击事件')
         })
@@ -196,8 +198,8 @@ export default {
 
         const type = 0
         this.getMapMarkersWrapper(type)
-        //this.getMapMarkersWrapper1(type)
-        //this.getDistrict(o)
+        // this.getMapMarkersWrapper1(type)
+        // this.getDistrict(o)
       })
     },
     zoomchange(e) {
@@ -215,13 +217,13 @@ export default {
 
       this.zoom = 11
       const area = '中国'
-      district.search(area, function (status, result) {
+      district.search(area, function(status, result) {
         console.log(result)
         var bounds = result.districtList[0].boundaries
         var polygons = []
         if (bounds) {
           for (var i = 0, l = bounds.length; i < l; i++) {
-            //生成行政区划polygon
+            // 生成行政区划polygon
             var polygon = new AMap.Polygon({
               map: map,
               strokeWeight: 1,
@@ -251,8 +253,8 @@ export default {
           for (const item of res.data) {
             this.markers.push({
               position: [item.position.lng, item.position.lat],
-              label: {content: item.title, offset: [0, 0]},
-              extData: {id: item.id}
+              label: { content: item.title, offset: [0, 0] },
+              extData: { id: item.id }
             })
           }
         } else {
@@ -284,7 +286,7 @@ export default {
           for (const item of res.data) {
             massMarkers.push({
               lnglat: [item.position.lng, item.position.lat],
-              id:item.id
+              id: item.id
             })
           }
           this.massMarks.setData(massMarkers)
@@ -324,6 +326,7 @@ export default {
         }
       }).catch(error => {
         this.showMarkerDialog = false
+        console.log(error)
       })
     },
     /* 弹出框 */

src/views/home/AMap1.vue

@@ -3,6 +3,15 @@
 </template>
 
 <script>
+import Vue from 'vue'
+import VueAMap from 'vue-amap'
+Vue.use(VueAMap)
+VueAMap.initAMapApiLoader({
+  key: 'your amap key',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.15'
+})
 import AMapLoader from '@amap/amap-jsapi-loader'
 import { shallowRef } from '@vue/reactivity'
 

src/views/home/BdMap.vue

@@ -52,25 +52,25 @@
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <el-button
-            type="text"
             v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
             v-clipboard:success="onCopy"
             v-clipboard:error="onCopyError"
+            type="text"
           >GoogleEarth 坐标</el-button>
         </div>
         <div class="text item">
           <el-image v-if="markerInfo.photoUrl !== null" :src="markerInfo.photoUrl" min-width="40" height="30" />
           <br>
           <label>
-            商品 <span v-text="markerInfo.itemId"/>
+            商品 <span v-text="markerInfo.itemId" />
           </label>
           <br>
           <label>
-            SKU <span v-text="markerInfo.sku"/>
+            SKU <span v-text="markerInfo.sku" />
           </label>
           <br>
           <label>
-            评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
+            评论 <span style="color: blue" v-text="markerInfo.replyContent" />
           </label>
           <br>
           <!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
@@ -93,7 +93,7 @@ Vue.use(BaiduMap, {
   ak: ''
 })
 
-import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
+import { getMapMarkers, getMarkerInfo } from '@/api/map'
 
 export default {
   components: {
@@ -120,7 +120,7 @@ export default {
         lat: null,
         lng: null
       },
-      form: 0,
+      form: 0
     }
   },
   created() {
@@ -175,7 +175,6 @@ export default {
           }
 
           that.choosedLocation = { province, city, district, addr, lng, lat }
-          // sendClickedLocation(that.choosedLocation)
         })
       }
     },
@@ -224,6 +223,7 @@ export default {
         }
       }).catch(error => {
         this.showMarkerDialog = false
+        console.log(error)
       })
     },
     handleDialogClose(done) {