vue结合百度地图绘制多边形

Posted 2022-07-13 caoxen

一、安装百度地图

npm install vue-baidu-map --save
// 或者
yarn install vue-baidu-map

二、在main.js中引用

import BMap from ‘vue-baidu-map‘

Vue.use(BaiduMap, 
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ‘YOUR_APP_KEY‘
)

三、看一下具体代码吧

  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 ? ‘停止绘制‘ : ‘开始绘制‘ </button>
 26       </bm-control>
 27     </baidu-map>
 28   </div>
 29 </template>
 30 
 31 <script>
 32 export default 
 33   name: ‘Polygon‘,
 34   data () 
 35     return 
 36       haha: ‘百度地图‘,
 37       center:  lng: 116.412732, lat: 39.911707 ,
 38       zoom: 13,
 39       polygonPath: 
 40         editing: false,
 41         paths: [] // 绘制完成后的经纬度，其实是在画的时候动态push的，因为在点击的时候触发了 paintPolygon 函数
 42       
 43     
 44   ,
 45   mounted: function () 
 46   ,
 47   methods: 
 48     handler ( BMap, map ) 
 49       console.log(BMap, map)
 50       map.enableScrollWheelZoom(true)
 51       // map.centerAndZoom(‘青岛市‘, 13)
 52     ,
 53     getClickInfo (e) 
 54       console.log(e.point.lng)
 55       console.log(e.point.lat)
 56     ,
 57     // 开启多边形绘制
 58     toggle (name) 
 59       this[name].editing = !this[name].editing
 60       // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
 61       if (this.polygonPath.paths && this.polygonPath.editing) 
 62         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       this.$set(path, path.length - 1, e.point)
 82     ,
 83     // 鼠标左键点击时往路径里push一个点
 84     newPolygon (e) 
 85       if (!this.polygonPath.editing) 
 86         return
 87       
 88       // 当开始绘制后把按钮调回开始绘制状态，防止绘制多个图形
 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     // 鼠标右键多边形绘制完成
101     paintPolygon (e) 
102       if (!this.polygonPath.editing) 
103         return
104       
105       const  paths  = this.polygonPath
106       !paths.length && paths.push([])
107       paths[paths.length - 1].push(e.point)
108     ,
109     alertpath (e) 
110       console.log(e.currentTarget.so)
111       console.log(this.polygonPath.paths[0])
112     
113   
114