源代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>繪制帶有箭頭的折線</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();
var lineList = new Array();//記錄要繪制的線
var arrowLineList = new Array();//記錄繪制的箭頭線
var isFirstLoad = false;//是否是第一次加載，第一次加載不觸發清除事件
var arrowLineLengthRate = 15 / 10;//15是你初始時設置的地圖顯示范圍，10是你初始時設置的箭頭的長度，當地圖放大縮小時保證箭頭線長度一致
var polyline = new BMap.Polyline([
new BMap.Point(116.425, 39.91936),
new BMap.Point(116.405, 39.920)
], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline);
lineList[lineList.length] = polyline;//記錄要繪制的線
arrowLineList[arrowLineList.length] = addArrow(polyline,10,Math.PI/7);//記錄繪制的箭頭線
var marker = new BMap.Marker(new BMap.Point(116.405, 39.920)); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
isFitstLoad = true;//第一次加載
/**
* 在百度地圖上給繪制的直線添加箭頭
* @param polyline 直線 var line = new BMap.Polyline([faydPoint,daohdPoint], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
* @param length 箭頭線的長度 一般是10
* @param angleValue 箭頭與直線之間的角度 一般是Math.PI/7
*/
function addArrow(polyline,length,angleValue){ //繪制箭頭的函數
var linePoint=polyline.getPath();//線的坐標串
var arrowCount=linePoint.length;
for(var i =1;i<arrowCount;i++){ //在拐點處繪制箭頭
var pixelStart=map.pointToPixel(linePoint[i-1]);
var pixelEnd=map.pointToPixel(linePoint[i]);
var angle=angleValue;//箭頭和主線的夾角
var r=length; // r/Math.sin(angle)代表箭頭長度
var delta=0; //主線斜率，垂直時無斜率
var param=0; //代碼簡潔考慮
var pixelTemX,pixelTemY;//臨時點坐標
var pixelX,pixelY,pixelX1,pixelY1;//箭頭兩個點
if(pixelEnd.x-pixelStart.x==0){ //斜率不存在是時
pixelTemX=pixelEnd.x;
if(pixelEnd.y>pixelStart.y)
{
pixelTemY=pixelEnd.y-r;
}
else
{
pixelTemY=pixelEnd.y+r;
}
//已知直角三角形兩個點坐標及其中一個角，求另外一個點坐標算法
pixelX=pixelTemX-r*Math.tan(angle);
pixelX1=pixelTemX+r*Math.tan(angle);
pixelY=pixelY1=pixelTemY;
}
else //斜率存在時
{
delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);
param=Math.sqrt(delta*delta+1);
if((pixelEnd.x-pixelStart.x)<0) //第二、三象限
{
pixelTemX=pixelEnd.x+ r/param;
pixelTemY=pixelEnd.y+delta*r/param;
}
else//第一、四象限
{
pixelTemX=pixelEnd.x- r/param;
pixelTemY=pixelEnd.y-delta*r/param;
}
//已知直角三角形兩個點坐標及其中一個角，求另外一個點坐標算法
pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;
pixelY=pixelTemY-Math.tan(angle)*r/param;
pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;
pixelY1=pixelTemY+Math.tan(angle)*r/param;
}
var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));
var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));
var Arrow = new BMap.Polyline([
pointArrow,
linePoint[i],
pointArrow1
], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(Arrow);
return Arrow;
}
}
//地圖加載完畢事件
map.addEventListener("tilesloaded",function(){
//alert("地圖加載完畢");
if(!isFirstLoad){
//map.clearOverlays();//清除所有的覆蓋物
//清除上一次繪制的箭頭線，不清除上一次的箭頭線，當地圖放大時箭頭線也會跟着放大
for(var i=0; i<arrowLineList.length; i++){
map.removeOverlay(arrowLineList[i]);//清除制定的覆蓋物，可以是直線、標注等
}
arrowLineList.length = 0;
//重新繪制箭頭線
for(var i=0; i<lineList.length; i++){
arrowLineList[arrowLineList.length] = addArrow(lineList[i],15 / arrowLineLengthRate,Math.PI / 7);//記錄繪制的箭頭線
}
}
isFirstLoad = false;
});
//單擊獲取點擊的經緯度
map.addEventListener("click",function(e){
alert(e.point.lng + "," + e.point.lat);
});
</script>
參考別人的代碼進行修正后的效果，如圖：
