update AMap.vue

src/api/map.js

@@ -6,6 +6,8 @@ const mapAPI = {
   markerInfoApi: '/api/mall/map/marker',
   location: '/api/mall/map/location',
   mainland: '/api/mall/map/cn',
+  geoItemApi: '/api/mall/map/item',
+  addGeoPointApi: '/api/mall/map/point'
 }
 
 export function getMapCenter() {
@@ -27,3 +29,15 @@ export function sendClickedLocation(loc) {
 export function getMainLand() {
   return get(mapAPI.mainland)
 }
+
+export function getGeoItems() {
+  return get(mapAPI.geoItemApi)
+}
+
+export function addGeoPoint(data) {
+  return post(mapAPI.addGeoPointApi, data)
+}
+
+export function getGeoPoint() {
+  return get(mapAPI.addGeoPointApi)
+}

src/router/map.js

@@ -3,6 +3,7 @@
 // ********************************************************************************************************************
 const Map = () => import('views/map/Map')
 const AMap = () => import('views/map/AMap')
+const AMap1 = () => import('views/map/AMap1')
 
 export default {
   path: '/map',
@@ -19,7 +20,7 @@ export default {
     {
       path: '/map/image',
       name: '图片',
-      component: AMap,
+      component: AMap1,
       meta: { needAuth: true }
     }
   ]

src/views/map/AMap.vue

@@ -79,19 +79,24 @@
 </template>
 
 <script>
+import { getGeoItems, getMapMarkers, 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'],
+  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 { lazyAMapApiLoaderInstance } from 'vue-amap'
-const amapManager = new VueAMap.AMapManager()
-import { getMainLand, getMapMarkers, getMarkerInfo } from '@/api/map'
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
+const amapManager = new AMapManager()
 
 export default {
   data() {
@@ -137,45 +142,34 @@ export default {
         lat: null,
         lng: null
       },
-      selectedOption: 0,
-      selectOptions: [
-        {
-          name: '全部',
-          value: 0
-        },
-        {
-          name: '分类1',
-          value: 1
-        },
-        {
-          name: '分类2',
-          value: 2
-        },
-        {
-          name: '分类3',
-          value: 3
-        },
-        {
-          name: '分类4',
-          value: 4
-        }
-      ],
+      selectedOption: 1,
+      selectOptions: [],
       value: []
     }
   },
   created() {
     document.title = '地图'
+    this.getItems()
   },
   methods: {
+    getItems() {
+      getGeoItems().then(resp => {
+        if (resp.code === 0) {
+          this.selectOptions = resp.data
+        }
+      })
+    },
     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], // 在指定地图缩放级别范围内展示海量点图层
@@ -193,47 +187,11 @@ export default {
         const type = 0
         this.getMapMarkersWrapper(type)
         // this.getMapMarkersWrapper1(type)
-        // this.getDistrict(o)
       })
     },
     zoomchange(e) {
       console.log('当前缩放级别: ' + this.amap.getZoom())
     },
-    getDistrict(map) {
-      // 创建行政区查询对象
-      var district = new AMap.DistrictSearch({
-        // 返回行政区边界坐标等具体信息
-        extensions: 'all',
-        // 设置查询行政区级别为 区
-        level: 'country',
-        subdistrict: 3
-      })
-
-      this.zoom = 11
-      const area = '中国'
-      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
-            var polygon = new AMap.Polygon({
-              map: map,
-              strokeWeight: 1,
-              path: bounds[i],
-              fillOpacity: 0.7,
-              fillColor: '#CCF3FF',
-              strokeColor: '#CC66CC'
-            })
-            polygons.push(polygon)
-          }
-
-          // 地图自适应
-          map.setFitView()
-        }
-      })
-    },
     getMapMarkersWrapper(type) {
       this.markers = []
       getMapMarkers(type).then(res => {
@@ -266,6 +224,7 @@ export default {
         })
       })
     },
+    // 渲染海量点
     getMapMarkersWrapper1(type) {
       this.massMarks.setData([])
       getMapMarkers(type).then(res => {
@@ -345,9 +304,6 @@ export default {
     },
     onChange() {
       this.getMapMarkersWrapper(this.selectedOption)
-    },
-    handleChange(value) {
-      console.log(value)
     }
   }
 }

src/views/map/AMap1.vue

@@ -0,0 +1,456 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="24">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <el-select
+              v-model="province"
+              size="small"
+              style="width: 170px"
+              placeholder="请选择省份（直辖市）"
+              @change="changeProvince()"
+            >
+              <el-option
+                v-for="item in provinces"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              />
+            </el-select> 省
+
+            <el-select
+              v-model="city"
+              size="small"
+              style="width: 160px;margin-left: 10px"
+              placeholder="请选择城市"
+              @change="changeCity"
+            >
+              <el-option
+                v-for="item in citys"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              />
+            </el-select> 市
+
+            <el-select
+              v-model="district"
+              size="small"
+              style="width: 160px;margin-left: 10px"
+              placeholder="请选择区（县）"
+              @change="changeDistrict"
+            >
+              <el-option
+                v-for="item in districts"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              />
+            </el-select> 区
+          </div>
+          <div id="container" class="text item amap-wrapper" />
+        </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
+            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" />
+          </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 AMapLoader from '@amap/amap-jsapi-loader'
+import {addGeoPoint, getGeoItems, getGeoPoint, getMapMarkers, getMarkerInfo} from '@/api/map'
+
+export default {
+  data() {
+    return {
+      amap: null,
+      plugins: ['Scale'],
+      mapCenter: [114.0000, 30.0000],
+      // zoom=6 的比例尺为 100km
+      zoom: 6,
+      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,
+      /* 弹框数据 */
+      showMarkerDialog: false,
+      markerInfo: {
+        itemId: null,
+        sku: null,
+        replyId: null,
+        replyContent: null,
+        appendContent: null,
+        photoUrl: null
+      },
+      earthPoint: {
+        lat: null,
+        lng: null
+      },
+      selectedOption: 1,
+      selectOptions: [],
+      province: '',
+      provinces: [],
+      city: '',
+      citys: [],
+      district: '',
+      districts: [],
+      path1: [{
+        path: [
+          [116.361904, 39.913423],
+          [116.362904, 39.913423],
+          [116.363904, 39.913423],
+          [116.364904, 39.913423],
+          [116.365904, 39.913423],
+          [116.386122, 39.901176],
+          [116.387271, 39.912501],
+          [116.398258, 39.904600],
+          [116.367904, 39.913423]
+        ]
+      }],
+      path: []
+    }
+  },
+  mounted() {
+    this.initAMap()
+  },
+  unmounted() {
+    this.map?.destroy()
+  },
+  created() {
+    document.title = '地图'
+    this.getItems()
+    // this.getGeoPoints()
+  },
+  methods: {
+    getItems() {
+      getGeoItems().then(resp => {
+        if (resp.code === 0) {
+          this.selectOptions = resp.data
+        }
+      })
+    },
+    getGeoPoints() {
+      getGeoPoint().then(resp => {
+        if (resp.code === 0) {
+          this.path = resp.data
+          this.loadPathSimplifier()
+        }
+      })
+    },
+    initAMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: ''
+      }
+      AMapLoader.load({
+        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轨迹展示组件
+        }
+      }).then((AMap) => {
+        // 设置地图容器id
+        this.map = new AMap.Map('container', {
+          viewMode: '2D', // 是否为3D地图模式
+          zoom: 6, // 初始化地图级别
+          center: [114.0000, 30.0000] // 初始化地图中心点位置
+        })
+
+        this.map.on('click', (e) => {
+          const geoPoint = {}
+          geoPoint.lng = e.lnglat.getLng()
+          geoPoint.lat = e.lnglat.getLat()
+          addGeoPoint(geoPoint).then(resp => {
+            if (resp.code === 0) {
+              // 获取经纬度
+              this.$message.info('map click: ' + e.lnglat.getLng() + ' ' + e.lnglat.getLat())
+            }
+          })
+        })
+
+        /* getGeoPoint().then(resp => {
+          if (resp.code === 0) {
+            const pathList = resp.data
+            AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
+              if (!PathSimplifier.supportCanvas) {
+                alert('当前环境不支持 Canvas！')
+                return
+              }
+              // 创建组件实例
+              var pathSimplifierIns = new PathSimplifier({
+                map: this.map,
+                zIndex: 100, // 图层叠加顺序
+                data: pathList, // 巡航路径
+                // 获取巡航路径中的路径坐标数组
+                getPath: (pathData, pathIndex) => {
+                  console.log(pathData.path)
+                  return pathData.path
+                }
+              })
+              // 创建巡航器
+              var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
+                loop: false, // 是否循环
+                speed: 2000 // 速度(km/h)
+              })
+              pathNavigator.start()
+            })
+          }
+        })*/
+        // this.loadPathSimplifier()
+        // this.getDistrict(this.map)
+      }).catch((e) => {
+        console.log(e)
+      })
+    },
+    zoomchange(e) {
+      console.log('当前缩放级别: ' + this.amap.getZoom())
+    },
+    // 轨迹巡航
+    loadPathSimplifier() {
+      AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
+        if (!PathSimplifier.supportCanvas) {
+          alert('当前环境不支持 Canvas！')
+          return
+        }
+        // 创建组件实例
+        var pathSimplifierIns = new PathSimplifier({
+          map: this.map,
+          zIndex: 100, // 图层叠加顺序
+          data: this.path, // 巡航路径
+          // 获取巡航路径中的路径坐标数组
+          getPath: (pathData, pathIndex) => {
+            return pathData.path
+          }
+        })
+        // 创建巡航器
+        var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
+          loop: false, // 是否循环
+          speed: 2000 // 速度(km/h)
+        })
+        pathNavigator.start()
+      })
+    },
+    getDistrict(map) {
+      // 创建行政区查询对象
+      var district = new AMap.DistrictSearch({
+        // 返回行政区边界坐标等具体信息
+        extensions: 'all',
+        // 设置查询行政区级别为 区
+        level: 'street',
+        subdistrict: 3
+      })
+
+      this.zoom = 11
+      const area = '双流'
+      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
+            var polygon = new AMap.Polygon({
+              map: map,
+              strokeWeight: 1,
+              path: bounds[i],
+              fillOpacity: 0.7,
+              fillColor: '#CCF3FF',
+              strokeColor: '#CC66CC'
+            })
+            polygons.push(polygon)
+          }
+
+          // 地图自适应
+          map.setFitView()
+        }
+      })
+    },
+    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
+        })
+      })
+    },
+    getMapMarkersWrapper1(type) {
+      this.massMarks.setData([])
+      getMapMarkers(type).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 5000
+          })
+
+          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: 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
+        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: 3000
+      })
+    },
+    onCopyError(e) {
+      this.$notify({
+        message: '复制 GoogleEarth 坐标失败!',
+        type: 'error',
+        duration: 3000
+      })
+    },
+    onChange() {
+      this.getMapMarkersWrapper(this.selectedOption)
+    },
+    changeProvince() {
+    },
+    changeCity() {
+    },
+    changeDistrict() {
+    }
+  }
+}
+</script>
+
+<style>
+.amap-wrapper {
+  width: 100%;
+  height: 600px;
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+</style>