最近因为公司的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)只能清除折线，箭头还是没有被清除。
解决方法
怎么样清除箭头，我想出了两种解决方法：
- 使用
map.clearOverlays()，不清除的覆盖物要加上enableMassClear: false。 - 打印一下icons，
icons.$c里面的元素跟map.getOverlays()返回的一样，这时候可以遍历icons.$c调用map.removeOverlay清除每个icon。
2. GL版本更换地图图层
当地图缩放到比较大的级别时，地图的建筑和标柱点会比较多，如果在上面去添加覆盖物会显得更加杂乱。产品经理提出实现百度地图官网中的效果，在查询出路线后，将地图样式改成浅色。
发现问题
一开始想到的方法是制定个性化地图，调用map.setMapStyleV2设置样式。根据实际需求，当动态去加载个性化地图时，会有一小段白屏时间。而百度地图官网切换样式还是比较流畅，感觉不像是设置了个性化样式。找了半天，最后在源码里面找到了mapStyleNameIdPair变量，根据命名可以推测出与地图样式有关。
接着找到使用到mapStyleNameIdPair的一个函数，根据代码可以推测出这是获取tile地图图层url的函数。接着一步步找this.map.config.style在哪里赋值。后面的步骤省略......
解决方法
- 在Map构造函数的可选参数中传入
- 通过
map.setMapStyleV2设置。
