# up driving

index.html

@@ -11,6 +11,6 @@
     <!-- <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script> -->
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=49842c6fe4d24df80871faec2e272a00&plugin=AMap.Transfer"></script> 
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=49842c6fe4d24df80871faec2e272a00&plugin=AMap.Driving"></script> 
   </body>
 </html>

src/views/counter/map2.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="app-container">
       <div id="map-container" tabindex="0"></div>
-      <div id="panel"></div>
+      <div v-show="flag" id="panel"></div>
+      <div v-show="mapClick && flag" id='bt-wrapper'>
+        <div id='bt'>点击去高德地图</div>
+      </div>  
   </div>
 </template>
 
@@ -15,6 +18,7 @@ export default {
     return {
       map: null,
       flag: false,
+      mapClick: false,
       defaultPositions: [
         {
           title: '海洋公园',
@@ -161,7 +165,7 @@ export default {
         }
         const map = new AMap.Map('map-container', {
           // center: this.coordinate,
-          center: [116.397428, 39.90923],
+          center: [113.203460828994, 22.64902452257],
           resizeEnable: true,
           zoom: 13
         })
@@ -171,29 +175,39 @@ export default {
         //   title: this.deviceList[0].title,
         //   map: map
         // })
-        const transOptions = {
+        const drivingOptions = {
           map: map,
-          city: '北京市',
-          panel: 'panel',
+          // city: '中山市',
+          panel: 'panel'
           // cityd:'乌鲁木齐',
-          policy: AMap.TransferPolicy.LEAST_TIME
+          // policy: AMap.DrivingPolicy.LEAST_TIME
         }
-        // 构造公交换乘类
-        const transfer = new AMap.Transfer(transOptions)
-        // 根据起、终点坐标查询公交换乘路线
-        transfer.search(new AMap.LngLat(116.291035, 39.907899), new AMap.LngLat(116.427281, 39.903719))
+        const driving = new AMap.Driving(drivingOptions)
+        const button = document.getElementById('bt')
+        driving.search(new AMap.LngLat(113.344095, 22.673091), new AMap.LngLat(113.203460828994, 22.64902452257), (status, result) => {
+          button.onclick = () => {
+            driving.searchOnAMAP({
+              origin: result.origin,
+              destination: result.destination
+            })
+          }
+        })
+        this.flag = true
+        // if (AMap.UA.mobile) {
+        //   document.getElementById('panel').style.display = 'none'
+        //   // document.getElementById('bt-wrapper').style.display = 'normal'
+        // }
       })
     }
   },
   created() {
     this.mapClick = this.$store.getters.mapClick
-    if (!this.mapClick) {
-      this.flag = true
-    }
+    // if (!this.mapClick) {
+    //   this.flag = true
+    // }
   },
   mounted() {
     if (this.mapClick) {
-      this.flag = true
       const device_id = this.$store.getters.deviceID
       this.getDevicesInitMap({ device_id })
     } else {
@@ -272,5 +286,28 @@ export default {
     right: 10px;
     width: 250px;
     border: solid 1px silver;
-}
+    margin-top: 100px;
+  }
+  @media only screen and (max-width: 768px) {
+    #panel {
+      display: none;
+    }
+  }
+  #bt-wrapper {
+    position: absolute;
+    width: 2rem;
+    bottom: 15%;
+    right: 10rem;
+  }
+  #bt {
+    font-size: .8rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 5px;
+    background-color: #0D9BF2;
+    padding: 6px;
+    width: 160px;
+    color: white;
+    margin: 0 auto;
+  }
 </style>