百度地图API组件

1template1
1div1
1el-dialog
title=“补充楼栋GIS信息”
:visible.sync=“visible”
width=“70%”
:before-close=“handleClose”
1
1div id=“container” class=“w-full h-100” /1
1span slot=“footer” class="dialog-footer"1
1el-button @click="handleClose"1取 消1/el-button1
1el-button type=“primary” @click="handleClose"1确 定1/el-button1
1/span1
1/el-dialog1
1/div1
1/template1

1script1
export default {
name: ‘BaiduMap’,
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
createScript: true,
map: {},
markers: [],
coordinateSet: []
}
},
mounted() {},
methods: {
// 关闭弹窗
handleClose() {
this.$emit(‘handleClose’)
},
// 创建script标签，异步引入
loadJScript() {
if (this.createScript) {
const elementScript = document.createElement(‘script’)
elementScript.type = ‘text/javascript’
elementScript.src = ‘https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=nPkGUEWtpGFuXpAnNsgj3lPhNHNLPMul&services=&t=20210528194133’
elementScript.onload = () =1 this.init()
document.body.appendChild(elementScript)
this.createScript = false
} else {
this.init()
}
},
// 初始化
init() {
if (!this.map.cCode) {
this.clearOverlays()
// 创建Map实例
this.map = new BMapGL.Map(‘container’) // eslint-disable-line
// 创建点坐标
const point = new BMapGL.Point(114.076475, 22.650907) // eslint-disable-line
// 设置中心点
this.map.centerAndZoom(point, 16)
// 启用滚轮放大缩小
this.map.enableScrollWheelZoom(true)
// 坐标集
this.coordinateSet = [‘114.073954,22.655961;114.081751,22.65291;114.080062,22.647606;114.07302,22.64754’]
// 镂空区域
const hole = new BMapGL.Polygon(this.coordinateSet, { // eslint-disable-line
fillColor: ‘blue’,
fillOpacity: 0.2
})
this.map.addOverlay(hole)
this.addMarker(point)
hole.addEventListener(‘click’, this.showInfo)
}
},
// 创建标注
addMarker(point) {
const marker = new BMapGL.Marker(point) // eslint-disable-line
this.markers = […this.markers, marker]
this.clearOverlays()
this.map.addOverlay(marker)
},
// 清除标识
clearOverlays() {
if (this.markers) {
for (const i in this.markers) {
this.map.removeOverlay(this.markers[i])
}
}
},
// 区域点击标注事件
showInfo(e) {
const point = new BMapGL.Point(e.latLng.lng, e.latLng.lat) // eslint-disable-line
this.addMarker(point)
}
}
}
1/script1

1style scoped1
1/style1