AMap.vue 新增路径添加功能

src/api/map.js

@@ -10,6 +10,7 @@ const mapAPI = {
   photoItemApi: '/api/geo/photo/item',
   addPositionAPi: '/api/geo/map/position',
   addMyPositionAPi: '/api/geo/map/my_position',
+  addPathAPi: '/api/geo/map/trail',
   mapMarks: '/api/geo/map/marks',
   trailPathApi: '/api/geo/map/trail',
   chartMapAreaApi: '/api/geo/chartmap/area',
@@ -56,6 +57,10 @@ export function addMyPosition(data) {
   return post(mapAPI.addMyPositionAPi, data)
 }
 
+export function addPath(data) {
+  return post(mapAPI.addPathAPi, data)
+}
+
 export function getGeoPoint() {
   return get(mapAPI.trailPathApi)
 }

src/views/map/AMap.vue

@@ -4,6 +4,7 @@
       <span style="float: left; padding: 5px; color: red">点击地图上任意点触发操作</span>
       <el-button style="float: right; padding: 5px" type="text" @click="clearCircle">清除圆形</el-button>
       <el-button style="float: right; padding: 5px" type="text" @click="onPathNavigator">路径巡航</el-button>
+      <el-button style="float: right; padding: 5px" type="text" @click="addPath">{{ addPathText }}</el-button>
     </el-header>
     <el-main>
       <div id="container" class="text item amap-wrapper" />
@@ -77,7 +78,10 @@ export default {
       mapKeys: {
         securityJsCode: '983d6ee43bab3edf3693e91508f94aa9',
         key: '7b75ab2839ce68b884c7a682501ea774'
-      }
+      },
+      addPathText: '添加路径',
+      enableAddPath: false,
+      pathPointList: []
     }
   },
   mounted() {
@@ -112,17 +116,26 @@ export default {
           center: [104.065753, 30.657462] // 初始化地图中心点位置
         })
 
+        const that = this
+        // 点击事件
         this.map.on('click', (e) => {
           // 获取经纬度
           var lng = e.lnglat.getLng()
           var lat = e.lnglat.getLat()
-          this.pointArr = [lng, lat]
-
-          this.positionForm.lng = lng
-          this.positionForm.lat = lat
-          this.showPositionDialog = true
+          const pointArr = [lng, lat]
+          if (that.enableAddPath) {
+            const point = { lng: lng, lat: lat }
+            this.pathPointList.push(point)
+            this.$message.info('add point -> (' + lng + ', ' + lat + ')')
+          } else {
+            that.pointArr = pointArr
+            that.positionForm.lng = lng
+            that.positionForm.lat = lat
+            that.showPositionDialog = true
+          }
         })
 
+        // 缩放事件
         this.map.on('zoomchange', (e) => {
           console.log('当前缩放级别: ' + this.map.getZoom())
         })
@@ -265,6 +278,25 @@ export default {
         }
       })
     },
+    addPath() {
+      if (!this.enableAddPath) {
+        this.enableAddPath = true
+        this.addPathText = '完成添加'
+      } else {
+        this.enableAddPath = false
+        this.addPathText = '添加路径'
+        console.log(this.pathPointList)
+
+        const pathTrail = { path: [] }
+        for (const item of this.pathPointList) {
+          const arr = []
+          arr.push(item.lng)
+          arr.push(item.lat)
+          pathTrail.path.push(arr)
+        }
+        this.path.push(pathTrail)
+      }
+    },
     onSavePosition() {
       this.showPositionDialog = false
       addGeoPosition(this.positionForm).then(resp => {