update map

src/router/map.js

@@ -18,8 +18,8 @@ export default {
       meta: { needAuth: true }
     },
     {
-      path: '/map/image',
-      name: '图片',
+      path: '/map/trail',
+      name: '轨迹图',
       component: AMap1,
       meta: { needAuth: true }
     }

src/views/map/AMap1.vue

@@ -18,7 +18,6 @@
                 :value="item.label"
               />
             </el-select> 省
-
             <el-select
               v-model="city"
               size="small"
@@ -33,7 +32,6 @@
                 :value="item.label"
               />
             </el-select> 市
-
             <el-select
               v-model="district"
               size="small"
@@ -48,56 +46,18 @@
                 :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>
       </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'
+import { addGeoPoint, getGeoPoint } from '@/api/map'
 
 export default {
   data() {
@@ -107,39 +67,6 @@ export default {
       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: '',
@@ -149,13 +76,6 @@ export default {
       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]
         ]
       }],
@@ -170,25 +90,8 @@ export default {
   },
   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: ''
@@ -222,35 +125,6 @@ export default {
             }
           })
         })
-
-        /* 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) => {
@@ -298,7 +172,6 @@ export default {
       this.zoom = 11
       const area = '双流'
       district.search(area, function(status, result) {
-        console.log(result)
         var bounds = result.districtList[0].boundaries
         var polygons = []
         if (bounds) {
@@ -320,123 +193,46 @@ export default {
         }
       })
     },
-    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
-        })
-      })
+    changeProvince() {
     },
-    getMapMarkersWrapper1(type) {
-      this.massMarks.setData([])
-      getMapMarkers(type).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            message: '加载了 ' + res.data.length + ' 条数据',
-            type: 'warning',
-            duration: 5000
-          })
+    changeCity() {
+    },
+    changeDistrict() {
+    },
+    onClick() {
+      this.$message.info('加载路径')
+      getGeoPoint().then(resp => {
+        if (resp.code === 0) {
+          const pathList = resp.data
+          if (pathList.length === 0) {
+            return
+          }
 
-          const massMarkers = []
-          for (const item of res.data) {
-            massMarkers.push({
-              lnglat: [item.position.lng, item.position.lat],
-              id: item.id
+          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
+              }
             })
-          }
-          this.massMarks.setData(massMarkers)
-          this.zoom = 5
-        } else {
-          this.$notify({
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
+            // 创建巡航器
+            var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
+              loop: false, // 是否循环
+              speed: 2000 // 速度(km/h)
+            })
+            pathNavigator.start()
           })
         }
-      }).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() {
     }
   }
 }

src/views/map/Map.vue

@@ -17,9 +17,9 @@
           router
           mode="horizontal"
         >
-          <el-menu-item index="/map/image">
-            <i class="el-icon-picture" />
-            <span slot="title">图片</span>
+          <el-menu-item index="/map/trail">
+            <i class="el-icon-map-location" />
+            <span slot="title">轨迹图</span>
           </el-menu-item>
         </el-menu>
       </el-col>