如何利用百度地图JSAPI画带箭头的线？

    百度地图JSAPI提供两种绘制多折线的方式，一种是已知多折线经纬度坐标串通过AddOverlay接口进行添加；另一种是通过在地图上鼠标单击进行绘制（鼠标绘制工具条库）。目前这两种方式只能绘制多折线，并不能同时绘制线的箭头，以下介绍如何在线的拐点同时绘制箭头，以供参考。最终效果如下：

   

    1. 绘制箭头方法：

    

    上图中，线段AB是通过JSAPI画线方式添加的，只要绘制出CBD就可以实现箭头效果。为了灵活绘制箭头，需要用户自定义箭头的长度(r)和角度(angle)。

    实现步骤如下：

     变量定义：pixelStart： 线的一端屏幕坐标，pixelEnd：线的箭头端屏幕坐标；r：选取多长距离绘制箭头（单位像素，并不是CB对应的箭头的长度，而是红色线段对应的距离）；angle：箭头线（CB或者DB）与AB的夹角。

     1) 首先要将AB两点的经纬度坐标转换成屏幕坐标。
     2) 然后根据AB两点屏幕坐标以及r长度，计算绿色小绿点的屏幕坐标pixelTem。

     3) 然后根据B点、小绿点的屏幕坐标及angle角度，计算出C,D两点的屏幕坐标。

     4) 利用map的坐标转换方法，将C,D两点的屏幕坐标转成经纬度表示的坐标。

     5) 利用画线方法，绘制CBD多折线。

      备注：思路很简单，主要是计算小绿点、C,D的屏幕坐标麻烦。楼主计算这些点的公式均来自与初中数学公式，就不再赘述直接上代码了。

 

     完整代码如下：