百度地图自定义控件

百度地图的原生控件已经很多了，但总会有些时候我们需要自己写个控件来实现某些功能

自定义控件的实现原理

看了百度地图的文档发现实现自定义控件的原理也不复杂
1、自己创建一个控件类继承百度地图的Control类的原型
2、将要实现功能的逻辑写在原型的initialize()方法中
3、实例化我们创建的控件类
4、把实例化的控件挂载到地图实例上

代码

自己来实现一个回到初始位置的地图控件

创建一个自己的控件类

import BMap from 'BMap'import bus from '../bus/bus'class MapInitControl extends BMap.Control {  constructor (option) {    super()    // 默认停靠位置和偏移量    // 也可以由传入的参数控制    this.defaultAnchor = option.anchor || BMAP_ANCHOR_TOP_RIGHT    this.defaultOffset = option.offset || new BMap.Size(20, 20)    // 自定义参数    // .....  }  initialize (map) {    // 这个初始化方法需要传入map，但事实上使用时没有手动调用initialize方法，也就没有传入map地图实例    // 在添加这个控件实例到地图上时，自动调用初始化方法，然后传入了当前的地图实例    // 使用一个自己不需要手动传入的参数还是感觉有那么一点怪异    // console.log(map)    const div = document.createElement('div')    // 添加文字说明    div.appendChild(document.createTextNode('初始位置'));    // 设置样式    div.style.cursor = "pointer"    div.style.border = ".5px solid #aaa"    div.style.fontSize = '12px'    div.style.backgroundColor = 'rgba(139, 164, 220, .9)'    div.style.color = 'rgb(255, 255, 255)'    div.style.padding = '3px 6px'    div.style.boxShadow = '2px 2px 3px rgba(0, 0, 0, 0.35)'    // div.s    // 监听点击事件    div.addEventListener('click', () => {      bus.$emit('setViewport')    })    // 添加DOM元素到地图中    map.getContainer().appendChild(div)    // 将DOM元素返回    return div  }}export default MapInitControl

官方demo上用的是ES5的写法，也就是用Function的方式来写，我为了代码统一用的是ES6的class写法，反正都是为了继承Control的原型方法
然后我并没有在点击事件中直接调用 map.setViewport()的方法，而是用Vue的bus直接emit了一个事件出去，主要也是为了业务考虑，主要是地图上的点会一直变动，这样可以在捕获到事件的时候，再动态的计算地图上的点

使用

// 添加一个自定义控件，返回地图初始位置addMapInitControl () {    // console.log(this.points)    let myMapInitControl = new MapInitControl({        anchor:window.BMAP_ANCHOR_TOP_RIGHT,        offset: new window.BMap.Size(22,80)    })    this.bmap.addControl(myMapInitControl)}// 触发回到中心点事件bus.$on('setViewport', () => {    // console.log('i get')    // console.log(this.data)    let points = this.getAllPoints()    points.length > 0 && this.bmap.setViewport(points)})

效果