百度地图JavaScript API踩坑记录

·  阅读 959

最近因为公司的WEB项目上需要使用到百度地图,花了几天时间熟悉API。在实现的过程中遇到了一些问题,官方文档和百度搜索未能解决。后面自己摸索出了解决方法(不是最佳的解决方案,仅供参考)。

1. 折线上添加方向箭头

原来项目需要使用WebGL版本,但由于GL版本无法实现折线上添加方向箭头,换成了JavaScript API v3.0版本。

根据官方文档提供的案例实现。

// 百度地图API功能
  var map = new BMap.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
  scale: 0.6,//图标缩放大小
  strokeColor:'#fff',//设置矢量图标的线填充颜色
  strokeWeight: '2',//设置线宽
});
  var icons = new BMap.IconSequence(sy, '10', '30');
// 创建polyline对象
  var pois = [
    new BMap.Point(116.350658,39.938285),
    new BMap.Point(116.386446,39.939281),
    new BMap.Point(116.389034,39.913828),
    new BMap.Point(116.442501,39.914603)
  ];
  var polyline =new BMap.Polyline(pois, {
    enableEditing: false,//是否启用线编辑,默认为false
    enableClicking: true,//是否响应点击事件,默认为true
    icons:[icons],
    strokeWeight:'8',//折线的宽度,以像素为单位
    strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
    strokeColor:"#18a45b" //折线颜色
  });

  map.addOverlay(polyline);          //增加折线
复制代码

发现问题

当只需要移除折线的时候,折线上的箭头并没有被清除。按照我的猜测,地图上的覆盖物应该可以通过map.getOverlays(),折线上的每个箭头都是一个覆盖物。打开控制台执行看看结果,果然多出了很多数据。
所以使用map.removeOverlay(line)只能清除折线,箭头还是没有被清除。 getOverlays.png

解决方法

怎么样清除箭头,我想出了两种解决方法:

  1. 使用map.clearOverlays(),不清除的覆盖物要加上enableMassClear: false
  2. 打印一下icons,icons.$c里面的元素跟map.getOverlays()返回的一样,这时候可以遍历icons.$c调用map.removeOverlay清除每个icon。

icons.png

2. GL版本更换地图图层

当地图缩放到比较大的级别时,地图的建筑和标柱点会比较多,如果在上面去添加覆盖物会显得更加杂乱。产品经理提出实现百度地图官网中的效果,在查询出路线后,将地图样式改成浅色。 tile.png

发现问题

一开始想到的方法是制定个性化地图,调用map.setMapStyleV2设置样式。根据实际需求,当动态去加载个性化地图时,会有一小段白屏时间。而百度地图官网切换样式还是比较流畅,感觉不像是设置了个性化样式。找了半天,最后在源码里面找到了mapStyleNameIdPair变量,根据命名可以推测出与地图样式有关。 getScript.png
接着找到使用到mapStyleNameIdPair的一个函数,根据代码可以推测出这是获取tile地图图层url的函数。接着一步步找this.map.config.style在哪里赋值。后面的步骤省略...... getTiles.png

解决方法

  • 在Map构造函数的可选参数中传入
  • 通过map.setMapStyleV2设置。

setmap.png

分类:
前端