# 窗体，按钮跳转

src/views/counter/map2.vue

@@ -92,6 +92,7 @@ export default {
           message: '跳转成功!'
         })
       }).catch(() => {
+        document.getElementById('map-container').removeEventListener
         this.$message({
           type: 'info',
           message: '已取消跳转'
@@ -127,6 +128,7 @@ export default {
     createInfoWindow(title, content) {
       const info = document.createElement('div')
       info.className = 'info'
+      info.setAttribute('id', 'info')
 
       // 可以通过下面的方式修改自定义窗体的宽高
       // info.style.width = "400px"
@@ -163,13 +165,16 @@ export default {
       // console.log(info)
       return info
     },
-    instantiateInforWindow(item) {
+    instantiateInforWindow(item, drivingButton = false) {
       const content = []
       const curTime = moment().format('YYYY-MM-DD HH:mm:ss')
       content.push('<div class="count">' + item.count + '</div>')
       content.push('<div class="time">时间：' + curTime + '</div>')
       content.push('<div><span>信号：' + item.signal + '</span><span class="energy">电量：' + item.energy + '</span></div>')
       content.push('<div>区域：尖沙咀</div>\n')
+      if (drivingButton) {
+        content.push('<button id="btn" class="btn">驾车规划</button>')
+      }
       const infoWindow = new AMap.InfoWindow({
         isCustom: true,
         closeWhenClickMap: true,
@@ -233,10 +238,20 @@ export default {
         AMap.event.addListener(geolocation, 'error', this.onError)
       })
     },
+    gotoDrivingEvent(e) {
+      const event = e || window.event
+      const target = event.target || event.srcElement
+      if (target.nodeName.toLocaleLowerCase() === 'button') {
+        console.log('the content is: ', target.innerHTML)
+        this.gotoDriving()
+        this.flag = true
+      }
+    },
     getDevicesInitMap(params) {
       fetchDeviceList(params).then(response => {
         this.deviceList = response.data.results
-        this.coordinate = this.deviceList[0].coordinate
+        const item = this.deviceList[0]
+        this.coordinate = item.coordinate
         if (this.coordinate === null) {
           this.coordinate = [113.203460828994, 22.64902452257]
         }
@@ -250,9 +265,11 @@ export default {
           zIndex: 10,
           map: this.map
         })
+
+        item.title = '东岸灯饰工业区'
+        const infoWindow = this.instantiateInforWindow(item, true)
         AMap.event.addListener(marker, 'click', () => {
-          this.gotoDriving()
-          this.flag = true
+          infoWindow.open(this.map, marker.getPosition())
         })
         // this.handleDrivingClick()
         // this.flag = true
@@ -261,6 +278,8 @@ export default {
         //   // document.getElementById('bt-wrapper').style.display = 'normal'
         // }
       })
+      const mapContainer = document.getElementById('map-container')
+      mapContainer.addEventListener('click', this.gotoDrivingEvent)
     }
   },
   created() {
@@ -389,4 +408,29 @@ export default {
     color: white;
     margin: 0 auto;
   }
+  #btn {
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-color: #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    transition: .1s;
+    font-weight: 500;
+    padding: 5px 5px;
+    font-size: 12px;
+    border-radius: 2px;
+  }
+  #btn:focus, #btn:hover {
+    color: #409eff;
+    border-color: #c6e2ff;
+    background-color: #ecf5ff;
+  }
 </style>