百度地图自定义控件

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了百度地图自定义控件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

百度地图自定义控件

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

自定义控件的实现原理

看了百度地图的文档发现实现自定义控件的原理也不复杂
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)
})

效果

百度地图自定义控件

脚本宝典总结

以上是脚本宝典为你收集整理的百度地图自定义控件全部内容,希望文章能够帮你解决百度地图自定义控件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。