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

西西偷西瓜 2024-09-02 14:03:01 阅读 60

环境

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

需求背景

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

实现思路

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

1. 升级插件

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

<code>// 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

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

<code>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值,但是位置一直在左上角

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

在这里插入图片描述

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

<code><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米了

总结

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。