vue-baidu-map支持百度地图最新webgl版本

环境

vue2、jeecgboot、“@vue/cli-service”: “^3.3.0”

需求背景

把地图放大，还是有很多标记点重叠在一起，连线都看不到。因为百度地图旧版本比例尺仅支持到了50米，查了百度开发者平台，最新版可以支持到5米

实现思路

理想情况是，vue-baidu-map插件支持平滑升级

1. 升级插件

查了 vue-baidu-map 文档，没有参数可以支持最新webgl版本地图

// https://github.com/Dafrok/vue-baidu-map/blob/master/components/map/Map.vue
$script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`

甚至vue-baidu-map只支持2.0版本的百度地图，不能叫旧版本，叫远古版本

最新提交记录竟然是七年前

2. 换插件

翻阅了issue和查找很多解决办法，找到了一个支持webgl版本的改良版vue-baidu-map，也支持vue2、vue3，最新提交记录是两个月前

根据文档安装插件：vue2-baidu-map，只比vue-baidu-map插件多传一个type参数

import BaiduMap from 'vue2-baidu-map';

app.use(BaiduMap, {
  ak: '百度地图ak',
  // v:'2.0',  // 默认使用3.0
  type: 'WebGL',
});

代码一保存，项目一跑，控制台很多报错

排查报错问题，是一些类报错，Control类等，还有一些方法报错：“TypeError: Cannot read properties of undefined”

真的是两眼一黑

3. 原生API

既然熟悉的插件用不了，还是那个原则：找官方文档

官方目前只支持react版本，React-BMapGL，并没有Vue版本的，只能用原生API去操作了

查了项目使用到百度地图的模块，大大小小有十几个，业务复杂，很多连线、很多判断、很多地图事件处理逻辑，地图上面还有很多浮层、按钮控制地图，而且还用了mapv展示海量标记点、管理图层

结论就是，纯原生不太现实

4. 改良vue-baidu-map

查了很多资料，升级vue-baidu-map， 找到了一篇博客：vue-baidu-map改为百度地图V3.0版本，虽然不支持webgl版本，提到的那个简单粗暴方法，复制插件整个components目录放在自己项目，通过组件的形式引入

这其实就是fork一下

这样调试方便多了，不用发包，随便log

能不动脑就不动脑，借助前面那个vue2-baidu-map兄弟的代码，对比看看做了什么支持webgl版本。具体做法就是，把vue-baidu-map克隆下来，再把vue2-baidu-map代码复制粘贴进去，看看兄弟改了哪里

主要是Map.vue，其它约等于没改：

能用的就搬过去，不能用的自己写

5. 实现代码

解决了一些控制类、setOffset方法兼容问题，比如，使用bm-control组件设置了偏移值offset没有位置并没有变化，setOffset方法控制台报错，各种底层方法报错；使用bm-info-window组件点击方法不出现信息窗体，设置了position值，但是位置一直在左上角

可以看我代码的注释说明：

目前只支持了项目里面用到几个组件：

<baidu-map>
<bm-scale>
<bm-overview-map>
<bm-geolocation>
<bm-copyright>
<bm-control>
<bm-marker>
<bm-info-window>

有需要可以直接用我的代码：https://github.com/QianYin-Zhou/vue-baidu-map

最终效果，百度地图比例尺成功支持到5米了

总结

我觉得能原生就原生，实在不行再考虑插件，插件并没有想象中方便