百度地图自定义控件

willin 发布于2019-08-23 17:54 / 631人阅读

摘要：百度地图自定义控件百度地图的原生控件已经很多了，但总会有些时候我们需要自己写个控件来实现某些功能自定义控件的实现原理看了百度地图的文档发现实现自定义控件的原理也不复杂自己创建一个控件类继承百度地图的类的原型将要实现功能的逻辑写在原型的方法中

百度地图自定义控件

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

自定义控件的实现原理

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

效果

云服务器 GPU云服务器自定义地图自定义控件? 自定义控件自定义控件安卓

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104326.html

第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
百度地图使用

摘要：项目已放到上在线预览效果截图添加点图标经纬度图标和后台获取之后的点定位点的经纬度获取数据点击之后图标和报修图标配置信息跳转链接循环添加多个点图标定位点的经纬度获取的数据图标的和点击之后图标和，报修图标配置百度地图创建项目已放到github上在线预览 showImg(https://segmentfault.com/img/bV4OmH?w=280&h=280); 效果截图 show...

jay_tian 2019-08-22 15:01 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0