百度地图自定义折线覆盖物，控制旋转方向

使用百度地图，路线规划是，自定义路线绘制+方向标识。

主要说明：

调用百度地图web服务API路线规划（为了拿到路线规划的途径点）使用Polyline进行路线绘制。Icon 进行自定义图标；控制图标中心偏移量{anchor:<Size>}。Marker进行覆盖物叠加：new BMap.Marker(<Point>,{ icon:<Icon>, rotation:<Number> });

计算角度

主要的问题在于如何计算，根据起至终点坐标（经度、纬度）值差，构建三角形，计算邻边角角度。

初始图标的指向是西向东

经纬度：南纬->北纬递增；西经->东经 递增

角度计算

// 确定方向，用于旋转图标角度 let angle = function (start,end) { // 通过 a、b 确定角度所处的象限 let a = start.lng - end.lng, b = start.lat - end.lat; // let a_c = Math.abs(a), b_c = Math.abs(b); // 获取得三角形的斜边 Math.hypot(); let c = Math.hypot(a_c,b_c); // 计算弧度 let radina = Math.acos(a_c/c); // 计算角度 let angleVal = Math.floor(radina*180/Math.PI); // 处理最终需要旋转的角度 if(a > 0){ // 第二、三象限 if(b>0){ // 三 angleVal = 90 + 90 - angleVal; }else { angleVal = -180 + angleVal; } }else{ // 一、四象限 if(b>0){ // 四 angleVal = angleVal; }else{ // 一 angleVal = - angleVal; } } return angleVal; };

自定义图标、添加覆盖物

// 挑选坐标点作为导向指标 let icon = new BMap.Icon(contextPath+"/img/guide.png",new BMap.Size(30,30),{ anchor:new BMap.Size(15,15) }); // 添加覆盖物 let marker = new BMap.Marker(points[mid],{icon:icon,rotation:angle(startP,endP)}); map.addOverlay(marker);

实现效果：