更新 map 相关页面

src/router/map.js

@@ -1,21 +1,21 @@
 // ********************************************************************************************************************
 // 网盘主页
 // ********************************************************************************************************************
-const Map = () => import('views/map/Map')
-const Map1 = () => import('views/map/Map1')
+const MapIndex = () => import('views/map/MapIndex')
+const AMap = () => import('views/map/AMap')
 const PhotoMap = () => import('views/map/PhotoMap')
 const TrailMap = () => import('views/map/TrailMap')
 
 export default {
   path: '/map',
-  name: 'Map',
-  component: Map,
+  name: 'MapIndex',
+  component: MapIndex,
   meta: { needAuth: true },
   children: [
     {
       path: '',
       name: '地图',
-      component: Map1,
+      component: AMap,
       meta: { needAuth: true }
     },
     {

src/views/map/Map1.vue → src/views/map/AMap.vue

@@ -1,11 +1,24 @@
 <template>
   <el-container>
     <el-header height="60">
-      <el-button style="float: right; padding: 3px 0" type="text" @click="drawCircle">绘制圆形</el-button>
+      <el-button style="float: right; padding: 5px" type="text" @click="drawCircle">绘制圆形</el-button>
+      <el-button style="float: right; padding: 5px" type="text" @click="onPathNavigator">路径巡航</el-button>
     </el-header>
     <el-main>
       <div id="container" class="text item amap-wrapper" />
     </el-main>
+
+    <el-dialog :visible.sync="showPositionDialog" width="30%" center>
+      <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <div slot="header" class="clearfix">
+          <span>选中的坐标</span>
+          <el-button style="float: right; padding: 10px" type="text" @click="onSavePosition">保存坐标</el-button>
+        </div>
+        <div class="text item">
+          <span style="color: red">({{ positionForm.lng }}, {{ positionForm.lat }})</span>
+        </div>
+      </el-card>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -14,7 +27,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
 import { addGeoPoint, getGeoPoint } from '@/api/map'
 
 export default {
-  name: 'Map1',
+  name: 'Map',
   data() {
     return {
       amap: null,
@@ -34,7 +47,16 @@ export default {
           [116.367904, 39.913423]
         ]
       }],
-      path: []
+      path: [],
+      showPositionDialog: false,
+      positionForm: {
+        lng: null,
+        lat: null
+      },
+      mapKeys: {
+        securityJsCode: '983d6ee43bab3edf3693e91508f94aa9',
+        key: '7b75ab2839ce68b884c7a682501ea774'
+      }
     }
   },
   mounted() {
@@ -49,10 +71,10 @@ export default {
   methods: {
     initAMap() {
       window._AMapSecurityConfig = {
-        securityJsCode: '983d6ee43bab3edf3693e91508f94aa9'
+        securityJsCode: this.mapKeys.securityJsCode
       }
       AMapLoader.load({
-        key: '7b75ab2839ce68b884c7a682501ea774', // 申请好的Web端开发者Key，首次调用 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',
@@ -68,6 +90,13 @@ export default {
           zoom: 6, // 初始化地图级别
           center: [104.065753, 30.657462] // 初始化地图中心点位置
         })
+
+        this.map.on('click', (e) => {
+          // 获取经纬度
+          this.positionForm.lng = e.lnglat.getLng()
+          this.positionForm.lat = e.lnglat.getLat()
+          this.showPositionDialog = true
+        })
       }).catch((e) => {
         console.log(e)
       })
@@ -207,6 +236,48 @@ export default {
         // 开启编辑模式
         circleEditor.open()
       })
+    },
+    onSavePosition() {
+      this.showPositionDialog = false
+      addGeoPoint(this.positionForm).then(resp => {
+        if (resp.code !== 0) {
+          this.$message.info('添加坐标失败')
+        }
+      })
+    },
+    onPathNavigator() {
+      getGeoPoint().then(resp => {
+        if (resp.code === 0) {
+          const pathList = resp.data
+          if (pathList.length === 0) {
+            return
+          }
+
+          this.path = pathList
+          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()
+          })
+        }
+      })
     }
   }
 }

src/views/map/Map.vue → src/views/map/MapIndex.vue

@@ -63,7 +63,7 @@ import { userMixin } from 'assets/js/mixin'
 import { getAuthedUser } from '@/utils/auth'
 
 export default {
-  name: 'Map',
+  name: 'MapIndex',
   mixins: [userMixin],
   data() {
     return {

src/views/map/PhotoMap.vue

@@ -151,7 +151,7 @@ export default {
     }
   },
   created() {
-    document.title = '地图'
+    document.title = '照片地图'
     this.getItems()
   },
   methods: {

src/views/map/TrailMap.vue

@@ -46,7 +46,6 @@
                 :value="item.label"
               />
             </el-select> 区
-            <el-button style="float: right; padding: 3px 0" type="text" @click="onClick">加载</el-button>
           </div>
           <div id="container" class="text item amap-wrapper" />
         </el-card>
@@ -199,41 +198,6 @@ export default {
     changeCity() {
     },
     changeDistrict() {
-    },
-    onClick() {
-      this.$message.info('加载路径')
-      getGeoPoint().then(resp => {
-        if (resp.code === 0) {
-          const pathList = resp.data
-          if (pathList.length === 0) {
-            return
-          }
-
-          this.path = pathList
-          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()
-          })
-        }
-      })
     }
   }
 }