百度地圖自定義控件

百度地圖自定義控件

百度地圖的原生控件已經不少了，但總會有些時候咱們須要本身寫個控件來實現某些功能

自定義控件的實現原理

看了百度地圖的文檔發現實現自定義控件的原理也不復雜
一、 本身建立一個控件類繼承百度地圖的Control類的原型
二、 將要實現功能的邏輯寫在原型的initialize()方法中
三、 實例化咱們建立的控件類
四、 把實例化的控件掛載到地圖實例上

代碼

本身來實現一個回到初始位置的地圖控件

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

效果