update GeoMap.vue

src/api/map.js

@@ -2,6 +2,7 @@ import { get, post } from '@/utils/request'
 
 const mapAPI = {
   photoMarks: '/api/geo/photo/marks',
+  cupMapApi: '/api/geo/map/cup',
   photoMarkInfo: '/api/geo/photo/mark/info',
   photoItemApi: '/api/geo/photo/item',
   addPositionAPi: '/api/geo/map/position',
@@ -17,6 +18,10 @@ export function getPhotoMarks(type) {
   return get(mapAPI.photoMarks + '?type=' + type)
 }
 
+export function getCupMap() {
+  return get(mapAPI.cupMapApi)
+}
+
 export function getMarkerInfo(id) {
   return get(mapAPI.photoMarkInfo + '?id=' + id)
 }

src/views/geo/GeoMap.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import { getPhotoMarks, getMarkerInfo } from '@/api/map'
+import { getMarkerInfo, getCupMap } from '@/api/map'
 
 import Vue from 'vue'
 import VueAMap from 'vue-amap'
@@ -123,7 +123,6 @@ export default {
         init: this.mapInit,
         zoomchange: this.zoomchange
       },
-      itemType: 4,
       // 弹框数据
       showMarkerDialog: false,
       markerInfo: {
@@ -160,23 +159,35 @@ export default {
           zooms: [3, 10], // 在指定地图缩放级别范围内展示海量点图层
           style: styleObject // 设置样式对象
         })
-
         // 将海量标点添加至地图实例
         massMarks.setMap(o)
-        // 添加点击事件
+        // 海量标点点击事件
         massMarks.on('click', (e) => {
           console.log('massMark 点击事件')
+          const id = e.data.id
+          const item = {
+            id: id,
+            position: {
+              lng: e.data.lnglat.lng,
+              lat: e.data.lnglat.lat
+            }
+          }
+          this.getMarkerInfoWrapper(item)
         })
+        // 设置海量点
         this.massMarks = massMarks
-        this.getPhotoMarksWrapper(this.itemType)
+
+        // 获取 mark 数据
+        this.getPhotoMarksWrapper()
+        // this.getPhotoMarksWrapper1()
       })
     },
     zoomchange(e) {
       console.log('当前缩放级别: ' + this.amap.getZoom())
     },
-    getPhotoMarksWrapper(type) {
+    getPhotoMarksWrapper() {
       this.markers = []
-      getPhotoMarks(type).then(res => {
+      getCupMap().then(res => {
         if (res.code === 0) {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
@@ -206,10 +217,10 @@ export default {
         })
       })
     },
-    // 渲染海量点
-    getPhotoMarksWrapper1(type) {
+    // 获取数据渲染海量点
+    getPhotoMarksWrapper1() {
       this.massMarks.setData([])
-      getPhotoMarks(type).then(res => {
+      getCupMap().then(res => {
         if (res.code === 0) {
           this.$notify({
             message: '加载了 ' + res.data.length + ' 条数据',
@@ -283,9 +294,6 @@ export default {
         type: 'error',
         duration: 1000
       })
-    },
-    onChange() {
-      this.getPhotoMarksWrapper(this.itemType)
     }
   }
 }