大家好,我是河畔一角,一名老前端,目前在货拉拉工作,兼职慕课网讲师。近期在做百度地图聚合的时候,发现一些坑点,希望能够把这个问题记录下来,日后帮助到对应的前端兄弟。
百度地图 JS SDK 提供了多个版本,其中默认 GL 版本,采用 WebGL 技术,可以更好的渲染 3D 视角地图,于是,我就采纳GL版本来开发我的地图需求。其中有一个功能是订单轨迹,官方同时提供了一个 轨迹视角动画 ,效果非常不错,只有 GL 版本才有,基于这个 Demo 快速实现预期效果。 然而同样我们又接到了一个订单聚合的需求,经过官网查阅,发现聚合图在GL版本下没有对应的库文件,除非切换到普通版本,但切换到普通版本轨迹动画就无法实现了,基于此问题,我们如何解决?
GL提供的Lib库
里面并没有
MarkerCluster
文件。
JavaScript Api 3.0 提供了点聚合功能,并提供了 CDN 库文件。GL 版本官方并没有点聚合功能,怎么办?
3.0 下点聚合需要的库文件:
<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
如果我们使用 3.0 版本可以使用点聚合功能,但是轨迹动画功能就无法使用,鱼和熊掌不可兼得,但,后来发现,GL版本实际上就是比普通版本多了一个 GL,比如,BMap 对象在GL版本下叫 BMapGL,举一个实际的例子:
3.0 创建坐标对象:
new window.BMap.Point(112.986172976054, 28.14357721892216)
GL 创建坐标对象
new window.BMapGL.Point(112.986172976054, 28.14357721892216)
于是我们下载 TextIconOverlay_min
和 MarkerClusterer_min
文件,发现里面全部是 BMap 对象,我们通过 VSCode 的 command + d( window 系统下是 ctrl + d ) 键 全部选中 BMap.
单词替换为 BMapGL.
保存即可。
此时,我们重新运行聚合图,发现在GL下可以正常运行。
但是,依然发现一个问题,每次鼠标拖动时,聚合图都会消失,后来发现有人遇到同样的问题,并给出了方法,此处我直接参考了他的方法,打开下载的TextIconOverlay
文件,搜索 markerMouseTarget
修改为markerPane
对象即可。
以上是本次针对百度地图3.0和GL版本关于点聚合图问题的记录,如果刚好你也在用,可能有所参考。