百度地图自定义控件

百度地图自定义控件

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

自定义控件的实现原理

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

代码

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

1. 创建一个自己的控件类

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)
})

效果