# 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,6 +211,29 @@ export default {
     onError() {
       document.getElementById('geo-tip').innerHTML = '定位失败'
     },
+    handleDrivingClick() {
+      const geo_map = new AMap.Map('map-container')
+      this.geo_map = geo_map
+      this.sleep(300)
+      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Driving', 'AMap.Geolocation'], () => {
+        geo_map.addControl(new AMap.ToolBar())
+        geo_map.addControl(new AMap.Scale())
+        const geolocation = new AMap.Geolocation({
+          enableHighAccuracy: true,
+          timeout: 10000,
+          buttonOffset: new AMap.Pixel(10, 20),
+          zoomToAccuracy: true,
+          panToLocation: false,
+          buttonPosition: 'RB'
+        })
+        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
@@ -198,28 +241,22 @@ export default {
         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())
-          map.addControl(new AMap.Scale())
-          const geolocation = new AMap.Geolocation({
-            enableHighAccuracy: true,
-            timeout: 10000,
-            buttonOffset: new AMap.Pixel(10, 20),
-            zoomToAccuracy: true,
-            panToLocation: false,
-            buttonPosition: 'RB'
-          })
-          map.addControl(geolocation)
-          geolocation.getCurrentPosition()
-          // 返回定位信息
-          AMap.event.addListener(geolocation, 'complete', this.onComplete)
-          // 返回定位出错信息
-          AMap.event.addListener(geolocation, 'error', this.onError)
+        this.map = new AMap.Map('map-container', {
+          center: this.coordinate,
+          resizeEnable: true,
+          zoom: 15
         })
-        this.flag = true
+        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;
   }