Recently, I spent a few days getting familiar with the API because baidu Map was needed for the company’s WEB project. In the process of implementation encountered some problems, official documents and Baidu search failed to solve. Then I found a solution (not the best solution, just for reference).

1. Add direction arrows to the line

The original project needed to use the WebGL version, but since the GL version could not add direction arrows on the line, the JavaScript API V3.0 version was changed.

According to the official documents provided by the case implementation.

Var map = new map. map ("allmap"); CenterAndZoom (new map.point (116.404, 39.915), 14); / / initialization maps, set the center coordinates and level map. The map enableScrollWheelZoom (true); Var sy = new map. Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.6,// icon zoom size strokeColor:'# FFF ',// Set vector icon line fill color strokeWeight: '2',// set line width}); var icons = new BMap.IconSequence(sy, '10', '30'); Var pois = [new map.point (116.350658,39.938285), new map.point (116.386446,39.939281), New map.point (116.389034,39.913828), new Map.point (116.442501,39.914603)]; Var polyline =new bmap. polyline (pois, {enableEditing: false, default: false enableClicking: Default: true ICONS :[ICONS], strokeWeight:'8',// The width of the fold in pixels StrokeColor :"#18a45b" // line color}); map.addOverlay(polyline); // Add foldsCopy the code

Found the problem

When only the polyline needs to be removed, the arrow on the polyline is not cleared. At my guess, the overlay on the map should passmap.getOverlays()Each arrow on the polyline is a covering. Open the console to see the result, sure enough, there is a lot more data.

So usingmap.removeOverlay(line)Can only clear the polyline, arrow still not cleared.

The solution

How to clear the arrows, I came up with two solutions:

  1. usemap.clearOverlays()Unremoved mulch should be addedenableMassClear: false.
  2. I’ll print my ICONS,icons.$cThe elements in it are the samemap.getOverlays()It returns the same, so you can iterate over iticons.$ccallmap.removeOverlayClear each icon.

2. Change the map layer for GL version

When the map is scaled to a larger scale, the map will have more buildings and pillar points, and it will be more cluttered if you add overlay on top of it. The product manager proposed to achieve the effect in the official website of Baidu Map, and changed the map style to a light color after the route was queried.

Found the problem

The first idea is to make a personalized map, callmap.setMapStyleV2Set styles. When loading the personalized map dynamically, there will be a short period of white screen time according to actual requirements. And Baidu map official website switching style is still relatively smooth, it does not feel like setting a personalized style. For a long time, finally found in the source codemapStyleNameIdPairVariable, based on the name can be inferred to be related to the map style.

Then find the use tomapStyleNameIdPairThis is the function that gets the url of the tile layer. And then work your way upthis.map.config.styleWhere to assign. The following steps omit……

The solution

  • Passed in the optional argument to the Map constructor
  • throughmap.setMapStyleV2Settings.