码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-14 16:58:09      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:yar   ora   syn   v-for   多个   center   rtp   edit   function   

一、安装百度地图

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 }

 

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

标签:yar   ora   syn   v-for   多个   center   rtp   edit   function   

原文地址:https://www.cnblogs.com/caoxen/p/11352488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!