# up geo map

src/views/counter/map2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
       <div id="map-container" tabindex="0"></div>
-      <div id="geo-tip"></div>
+      <div v-show="flag" id="geo-tip"></div>
       <div v-show="flag" id="panel"></div>
       <div v-show="mapClick && flag" id='bt-wrapper'>
         <div id='bt'>点击去高德地图</div>
@@ -17,6 +17,7 @@ export default {
   name: 'map2',
   data() {
     return {
+      geo_map: null,
       map: null,
       flag: false,
       mapClick: false,
@@ -78,6 +79,25 @@ export default {
     sleep(time) {
       for (var temp = Date.now(); Date.now() - temp <= time;);
     },
+    gotoDriving() {
+      this.$confirm('此操作将跳转到路线规划, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.map.clearMap()
+        this.handleDrivingClick()
+        this.$message({
+          type: 'success',
+          message: '跳转成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消跳转'
+        })
+      })
+    },
     initMap() {
       this.map = new AMap.Map('map-container', {
         center: [114.143472, 22.284105],
@@ -173,7 +193,7 @@ export default {
       str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
       document.getElementById('geo-tip').innerHTML = str.join('<br>')
       const drivingOptions = {
-        map: this.map,
+        map: this.geo_map,
         panel: 'panel'
       }
       // 驾车路径规划
@@ -191,19 +211,13 @@ export default {
     onError() {
       document.getElementById('geo-tip').innerHTML = '定位失败'
     },
-    getDevicesInitMap(params) {
+    handleDrivingClick() {
-      fetchDeviceList(params).then(response => {
+      const geo_map = new AMap.Map('map-container')
-        this.deviceList = response.data.results
+      this.geo_map = geo_map
-        this.coordinate = this.deviceList[0].coordinate
-        if (this.coordinate === null) {
-          this.coordinate = [113.203460828994, 22.64902452257]
-        }
-        const map = new AMap.Map('map-container')
-        this.map = map
       this.sleep(300)
       AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Driving', 'AMap.Geolocation'], () => {
-          map.addControl(new AMap.ToolBar())
+        geo_map.addControl(new AMap.ToolBar())
-          map.addControl(new AMap.Scale())
+        geo_map.addControl(new AMap.Scale())
         const geolocation = new AMap.Geolocation({
           enableHighAccuracy: true,
           timeout: 10000,
@@ -212,14 +226,37 @@ export default {
           panToLocation: false,
           buttonPosition: 'RB'
         })
-          map.addControl(geolocation)
+        geo_map.addControl(geolocation)
         geolocation.getCurrentPosition()
         // 返回定位信息
         AMap.event.addListener(geolocation, 'complete', this.onComplete)
         // 返回定位出错信息
         AMap.event.addListener(geolocation, 'error', this.onError)
       })
+    },
+    getDevicesInitMap(params) {
+      fetchDeviceList(params).then(response => {
+        this.deviceList = response.data.results
+        this.coordinate = this.deviceList[0].coordinate
+        if (this.coordinate === null) {
+          this.coordinate = [113.203460828994, 22.64902452257]
+        }
+        this.map = new AMap.Map('map-container', {
+          center: this.coordinate,
+          resizeEnable: true,
+          zoom: 15
+        })
+        const marker = new AMap.Marker({
+          position: this.coordinate,
+          zIndex: 10,
+          map: this.map
+        })
+        AMap.event.addListener(marker, 'click', () => {
+          this.gotoDriving()
           this.flag = true
+        })
+        // this.handleDrivingClick()
+        // this.flag = true
         // if (AMap.UA.mobile) {
         //   document.getElementById('panel').style.display = 'none'
         //   // document.getElementById('bt-wrapper').style.display = 'normal'
@@ -248,7 +285,7 @@ export default {
 <style lang="css">
   #map-container {
     width: 100%;
-    height: 80%;
+    height: 90%;
     overflow: hidden;
     position: absolute;
   }