使用高德地图替换百度地图

src/main.js

@@ -43,7 +43,7 @@ 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.4'
+  v: '1.4.15'
 })
 
 import VueClipboards from 'vue-clipboard2'

src/router/index.js

@@ -286,8 +286,8 @@ const routes = [
   },
   {
     path: '/map',
-    name: 'BdMap',
-    component: BdMap
+    name: 'AMap',
+    component: AMap
   },
   {
     path: '/bdmap',

src/views/home/AMap.vue

@@ -4,15 +4,25 @@
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div class="text item amap-wrapper">
+            <el-select v-model="form" placeholder="选择标签" @change="onChange">
+              <el-option label="全部" value="0" />
+              <el-option label="分类1" value="1" />
+              <el-option label="分类2" value="2" />
+              <el-option label="分类3" value="3" />
+            </el-select>
+
             <el-amap class="amap-box"
                      :vid="'amap-vue'"
-                     :amap-manager="amapManager"
                      :zoom="zoom"
-                     :center="mapCenter">
+                     :center="mapCenter"
+                     :plugin="plugins">
               <el-amap-marker
                 v-for="(marker, index) in markers"
-                :position="marker"
                 :key="index"
+                :position="marker.position"
+                :label="marker.label"
+                :events="events"
+                :extData="marker.extData"
               ></el-amap-marker>
             </el-amap>
           </div>
@@ -28,20 +38,188 @@
         </el-card>
       </el-row>
     </el-col>-->
+
+    <!-- marker 内容弹窗   -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showMarkerDialog"
+      :before-close="handleDialogClose"
+      width="30%"
+      center
+    >
+      <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"
+          >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"/>
+          </label>
+          <br>
+          <label>
+            SKU <span v-text="markerInfo.sku"/>
+          </label>
+          <br>
+          <label>
+            评论 <span style="color: blue" v-text="markerInfo.replyContent"/>
+          </label>
+          <br>
+          <!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
+                      追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
+                    </label>-->
+        </div>
+      </el-card>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
-import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
-let amapManager = new AMapManager();
+import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
+
 export default {
   data () {
     return {
+      plugins: ['Scale'],
       mapCenter: [114.0000, 30.0000],
+      // zoom=6 的比例尺为 100km
       zoom: 6,
       markers: [
-        [114.0000, 30.0000]
+        {
+          position: [114.1234, 30.0000],
+          label:{content:'钦汇园0', offset:[0,0]},
+          extData: {id: 1}
+        },
+        {
+          position: [116.0000, 32.0000],
+          label:{content:'钦汇园1', offset:[0,0]},
+          extData: {id: 2}
+        },
+        {
+          position: [118.0000, 34.0000],
+          label:{content:'钦汇园2', offset:[0,0]},
+          extData: {id: 3}
+        }
       ],
+      events: {
+        click: (e) => {
+          const id = e.target.getExtData().id
+          const position = e.target.getPosition()
+          const item = {
+            id: id,
+            position: {
+              lng: position.lng,
+              lat: position.lat
+            }
+          }
+          this.getMarkerInfoWrapper(item)
+        },
+      },
+      /* 弹框数据 */
+      showMarkerDialog: false,
+      markerInfo: {
+        itemId: null,
+        sku: null,
+        replyId: null,
+        replyContent: null,
+        appendContent: null,
+        photoUrl: null
+      },
+      earthPoint: {
+        lat: null,
+        lng: null
+      },
+      form: 0,
+    }
+  },
+  created() {
+    document.title = '地图'
+    const type = 0
+    this.getMapMarkersWrapper(type)
+  },
+  methods: {
+    getMapMarkersWrapper(type) {
+      this.markers = []
+      getMapMarkers(type).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 5000
+          })
+
+          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}
+            })
+          }
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
+    getMarkerInfoWrapper(item) {
+      this.earthPoint = item.position
+      this.showMarkerDialog = true
+      this.markerInfo = {
+        itemId: null,
+        sku: null,
+        replyId: null,
+        replyContent: null,
+        appendContent: null,
+        photoUrl: null
+      }
+
+      getMarkerInfo(item.id).then(res => {
+        if (res.code === 0) {
+          this.markerInfo = res.data
+        } else {
+          this.showMarkerDialog = false
+        }
+      }).catch(error => {
+        this.showMarkerDialog = false
+      })
+    },
+    handleDialogClose(done) {
+      this.showMarkerDialog = false
+      this.earthPoint = { lat: null, lng: null }
+      done()
+    },
+    onCopy(e) {
+      this.$notify({
+        message: 'GoogleEarth 坐标已复制, 快到 GoogleEarth 中去找这个地方吧~',
+        type: 'warning',
+        duration: 3000
+      })
+    },
+    onCopyError(e) {
+      this.$notify({
+        message: '复制 GoogleEarth 坐标失败!',
+        type: 'error',
+        duration: 3000
+      })
+    },
+    onChange() {
+      const type = this.form
+      this.getMapMarkersWrapper(type)
     }
   }
 }

src/views/home/BdMap.vue

@@ -141,31 +141,6 @@ export default {
         this.getMapMarkersWrapper(type)
       }
     },
-    getMapMarkersWrapper(type) {
-      this.markers = []
-      getMapMarkers(type).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            message: '加载了 ' + res.data.length + ' 条数据',
-            type: 'warning',
-            duration: 5000
-          })
-          this.markers = res.data
-        } else {
-          this.$notify({
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
     getClickInfo(e) {
       // 此时已经可以获取到BMap类
       if (this.BMap) {
@@ -199,6 +174,31 @@ export default {
         })
       }
     },
+    getMapMarkersWrapper(type) {
+      this.markers = []
+      getMapMarkers(type).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 5000
+          })
+          this.markers = res.data
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
     getMarkerInfoWrapper(item) {
       this.earthPoint = item.position
       this.showMarkerDialog = true