update GeoMap.vue

src/views/geo/GeoMap.vue

@@ -1,10 +1,94 @@
 <template>
   <div id="container" class="amap-wrapper">
+    <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"
+        :ext-data="marker.extData"
+      />
+    </el-amap>
+
+    <!-- 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
+            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" />
+          <div v-if="markerInfo.type === 3">
+            <el-row>
+              <el-row>
+                ID
+                <a style="text-decoration-line: none" target="_blank" :href="`https://item.taobao.com/item.htm?id=${markerInfo.itemId}`">
+                  <span style="color: blue">{{ markerInfo.itemId }}</span>
+                </a>
+              </el-row>
+              <el-row>
+                SKU <span style="color: blue" v-text="markerInfo.sku" />
+              </el-row>
+              <el-row>
+                评论 <span style="color: blue" v-text="markerInfo.replyContent" />
+              </el-row>
+            </el-row>
+          </div>
+          <div v-if="markerInfo.type === 2">
+            <el-row>
+              <el-row>
+                ID
+                <router-link style="text-decoration-line: none" target="_blank" :to="`/image/${markerInfo.itemId}`">
+                  <span style="color: blue">{{ markerInfo.itemId }}</span>
+                </router-link>
+              </el-row>
+            </el-row>
+          </div>
+        </div>
+      </el-card>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
+import { getPhotoMarks, getMarkerInfo } from '@/api/map'
+
+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', 'AMap.MassMarks', 'AMap.Size',
+    'AMap.Pixel'
+  ],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.15'
+})
+
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
+const amapManager = new AMapManager()
 
 export default {
   name: 'GeoMap',
@@ -12,56 +96,196 @@ export default {
     return {
       amap: null,
       plugins: ['Scale'],
+      mapCenter: [114.0000, 30.0000],
       // zoom=6 的比例尺为 100km
+      // zoom=5 的比例尺为 200km
+      // zoom=4 的比例尺为 500km
       zoom: 5,
-      mapCenter: [108.337237, 33.881985],
-      mapKeys: {
-        securityJsCode: '983d6ee43bab3edf3693e91508f94aa9',
-        key: '7b75ab2839ce68b884c7a682501ea774'
+      markers: [],
+      markerEvents: {
+        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)
+        }
+      },
+      /* 海量点 */
+      massMarks: null,
+      amapManager,
+      mapEvents: {
+        init: this.mapInit,
+        zoomchange: this.zoomchange
+      },
+      itemType: 4,
+      // 弹框数据
+      showMarkerDialog: false,
+      markerInfo: {
+        itemId: null,
+        sku: null,
+        replyId: null,
+        replyContent: null,
+        appendContent: null,
+        photoUrl: null
+      },
+      earthPoint: {
+        lat: null,
+        lng: null
       }
     }
   },
-  mounted() {
-    this.initAMap()
-  },
-  unmounted() {
-    this.map?.destroy()
-  },
   created() {
-    document.title = 'GeoMap'
+    document.title = 'CupMap'
   },
   methods: {
-    initAMap() {
-      window._AMapSecurityConfig = {
-        securityJsCode: this.mapKeys.securityJsCode
-      }
-      AMapLoader.load({
-        key: this.mapKeys.key, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
-          'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MassMarks', 'AMap.Size',
-          'AMap.Pixel'], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
-        AMapUI: { // 重点就是这个
-          version: '1.0',
-          plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker']// SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
+    mapInit(o) {
+      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) // 图标显示位置偏移量，基准点为图标左上角
+        }
+
+        // 海量点样式
+        const massMarks = new AMap.MassMarks([], {
+          zIndex: 5, // 海量点图层叠加的顺序
+          zooms: [3, 10], // 在指定地图缩放级别范围内展示海量点图层
+          style: styleObject // 设置样式对象
+        })
+
+        // 将海量标点添加至地图实例
+        massMarks.setMap(o)
+        // 添加点击事件
+        massMarks.on('click', (e) => {
+          console.log('massMark 点击事件')
+        })
+        this.massMarks = massMarks
+        this.getPhotoMarksWrapper(this.itemType)
+      })
+    },
+    zoomchange(e) {
+      console.log('当前缩放级别: ' + this.amap.getZoom())
+    },
+    getPhotoMarksWrapper(type) {
+      this.markers = []
+      getPhotoMarks(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: 1000
+          })
         }
-      }).then((AMap) => {
-        // 设置地图容器id
-        this.map = new AMap.Map('container', {
-          viewMode: '2D', // 是否为3D地图模式
-          zoom: this.zoom, // 初始化地图级别
-          center: this.mapCenter // 初始化地图中心点位置
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 1000
         })
+      })
+    },
+    // 渲染海量点
+    getPhotoMarksWrapper1(type) {
+      this.massMarks.setData([])
+      getPhotoMarks(type).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 5000
+          })
 
-        // 点击地图事件(获取经纬度)
-        this.map.on('click', (e) => {
-          var lng = e.lnglat.getLng()
-          var lat = e.lnglat.getLat()
-          this.$message.info('选中坐标: (' + lng + ',' + lat + ')')
+          const massMarkers = []
+          for (const item of res.data) {
+            massMarkers.push({
+              lnglat: [item.position.lng, item.position.lat],
+              id: item.id
+            })
+          }
+          this.massMarks.setData(massMarkers)
+          this.zoom = 5
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 1000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 1000
         })
-      }).catch((e) => {
-        this.$message.error(e)
       })
+    },
+    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
+        console.log(error)
+      })
+    },
+    /* 弹出框 */
+    handleDialogClose(done) {
+      this.showMarkerDialog = false
+      this.earthPoint = { lat: null, lng: null }
+      done()
+    },
+    onCopy(e) {
+      this.$notify({
+        message: 'GoogleEarth 坐标已复制, 快到 GoogleEarth 中去找这个地方吧~',
+        type: 'warning',
+        duration: 1000
+      })
+    },
+    onCopyError(e) {
+      this.$notify({
+        message: '复制 GoogleEarth 坐标失败!',
+        type: 'error',
+        duration: 1000
+      })
+    },
+    onChange() {
+      this.getPhotoMarksWrapper(this.itemType)
     }
   }
 }