大家好,我是河畔一角,一名老前端,目前在货拉拉工作,兼职慕课网讲师。近期在做百度地图聚合的时候,发现一些坑点,希望能够把这个问题记录下来,日后帮助到对应的前端兄弟。

百度地图 JS SDK 提供了多个版本,其中默认 GL 版本,采用 WebGL 技术,可以更好的渲染 3D 视角地图,于是,我就采纳GL版本来开发我的地图需求。其中有一个功能是订单轨迹,官方同时提供了一个 轨迹视角动画 ,效果非常不错,只有 GL 版本才有,基于这个 Demo 快速实现预期效果。 然而同样我们又接到了一个订单聚合的需求,经过官网查阅,发现聚合图在GL版本下没有对应的库文件,除非切换到普通版本,但切换到普通版本轨迹动画就无法实现了,基于此问题,我们如何解决?

  • SDK 3.0 lbsyun.baidu.com/index.php?t…
  • SDK Lite lbsyun.baidu.com/index.php?t…
  • SDK GL lbsyun.baidu.com/index.php?t…
  • GL提供的Lib库

    github.com/huiyan-fe/B…

    里面并没有 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_minMarkerClusterer_min 文件,发现里面全部是 BMap 对象,我们通过 VSCode 的 command + d( window 系统下是 ctrl + d ) 键 全部选中 BMap. 单词替换为 BMapGL. 保存即可。

    此时,我们重新运行聚合图,发现在GL下可以正常运行。

    但是,依然发现一个问题,每次鼠标拖动时,聚合图都会消失,后来发现有人遇到同样的问题,并给出了方法,此处我直接参考了他的方法,打开下载的TextIconOverlay文件,搜索 markerMouseTarget 修改为markerPane对象即可。

    以上是本次针对百度地图3.0和GL版本关于点聚合图问题的记录,如果刚好你也在用,可能有所参考。

  • 一次令人窒息的百度面试
  • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
  • 私信