vue combined with Baidu map drawing polygons

First, install the Baidu Map

sea view-to Baidu map Your page will-to install for the npm - and Save
 // huo_zhe 
yarn-to Baidu-map Your page will to install for sea view

Second, the reference in main.js

the BMap Import from  ' VUE-baidu-the Map ' 

Vue.use (BaiduMap, { 
  // AK is in Baidu map application is the key developer platforms See http://lbsyun.baidu.com/apiconsole/key * / 
  AK: ' YOUR_APP_KEY ' 
})

Third, look at the specific bar code

  1 <template>
  2   <div class="mapbox">
  3     <baidu-map
  4       :center="center"
  5       :zoom="zoom"
  6       :map-click="false"
  7       @mousemove="syncPolygon"
  8       @ready="handler"
  9       style="height:800px"
 10       @click="paintPolygon"
 11       @rightclick="newPolygon"
 12     >
 13       <bm-polygon
 14         :path="path"
 15         v-for="path of polygonPath.paths"
 16         :key="path.toString()"
 17         stroke-color="blue"
 18         fill-color="red"
 19         :fill-opacity="0.8"
 20         :stroke-opacity="0.5"
 21         :stroke-weight="2"
 22         @click="alertpath"
 23       />
 24       <bm-control>
 25         <button @click="toggle('polygonPath')">{? {PolygonPath.editing 'stop drawing': 'start drawing'}} </ Button > 
26 is        </ BM-Control > 
27      </ baidu-Map > 
28    </ div > 
29  </ Template > 
30  
31 is  < Script > 
32  Export default {
 33 is    name: ' Polygon ' ,
 34 is    Data () {
 35      return {
 36        haha: ' Baidu map ' ,
 37 [        Center:{Lng:116.412732 , LAT: 39.911707 },
 38 is        Zoom: 13 is ,
 39        polygonPath: {
 40          Editing: to false ,
 41 is          Paths: [] // latitude and longitude of the drawing is complete, when the painting is in fact push the dynamic, because the trigger when clicked paintPolygon the function 
42 is        }
 43 is      }
 44 is    },
 45    Mounted: function () {
 46 is    },
 47    Methods: {
 48      Handler ({the BMap, Map}) {
 49        the console.log (the BMap, Map)
 50        map.enableScrollWheelZoom (to true )
 51 is        // map.centerAndZoom ( 'Qingdao', 13 is) 
52 is      },
 53 is      getClickInfo (E) {
 54 is        the console.log (e.point.lng)
 55        the console.log (e.point.lat)
 56 is      },
 57      // open polygon rendering 
58      Toggle (name) {
 59        the this [name] .editing =  ! the this [name] .editing
 60        // do here determining step, if there is a path open draw and put the old path empty 
61 is        IF ( the this .polygonPath.paths &&  the this .polygonPath.editing) {
 62 is          the this.polygonPath.paths = []
 63       }
 64     },
 65     // 鼠标移动时
 66     syncPolygon (e) {
 67       if (!this.polygonPath.editing) {
 68         return
 69       }
 70       const { paths } = this.polygonPath
 71       if (!paths.length) {
 72         return
 73       }
 74       const path = paths[paths.length - 1]
 75       if( ! Path.length) {
 76          return 
77        }
 78        IF (path.length ===  . 1 ) {
 79          path.push (e.point)
 80        }
 81        the this $ SET (path, path.length. -  . 1 , E. point)
 82      },
 83      // left mouse button is clicked to push a point where the path 
84      newPolygon (E) {
 85        iF ( ! the this .polygonPath.editing) {
 86          return 
87        }
 88        // when the transfer button to start drawing back to start drawing state, to prevent multiple graphics rendering
 89       this['polygonPath'].editing = !this['polygonPath'].editing
 90       const { paths } = this.polygonPath
 91       if (!paths.length) {
 92         paths.push([])
 93       }
 94       const path = paths[paths.length - 1]
 95       path.pop()
 96       if (path.length) {
 97         paths.push([])
 98       }
 99      }
 100      // right-polygon rendering is completed 
101      paintPolygon (E) {
 102        IF ( ! The this .polygonPath.editing) {
 103          return 
104        }
 105        const} {Paths =  the this .polygonPath
 106        ! Paths.length && Paths. Push ([])
 107        Paths [paths.length -  . 1 ] .push (e.point)
 108      },
 109      alertpath (E) {
 110        the console.log (e.currentTarget.so)
 111       console.log(this.polygonPath.paths[0])
112     }
113   }
114 }