怎麼在折線的中點畫箭頭標識方向，這個問題糾結了我很久，後來發現其實很簡單，在網上有一個在端點畫箭頭的例子，其實我們可以把它改造成在中間點畫，但是箭頭的大小會隨縮放的級別的變化而變化。這個怎麼解決呢？我們只要加一個監聽就可以了，每次把它重畫不就保持大小了。代碼如下：
<!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=2.0&ak=你自己的key"></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();
drawLine();
map.addEventListener("zoomend", function(){
map.clearOverlays();
drawLine();
});
function drawLine(){
var polyline = new BMap.Polyline([
//new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.425,39.91936),
new BMap.Point(116.415,39.93936),
// new BMap.Point(116.415,39.92936),
], {strokeColor:"#F00", strokeWeight:2, strokeOpacity:0.8});
map.addOverlay(polyline);
addArrow(polyline,10,Math.PI/7);
}
/*
* 在線的中點處畫箭頭
* @param {Object} polyline 地圖上的折線
* @param {Object} length 代表箭頭長度
* @param {Object} angleValue 箭頭和主線的夾角
*/
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,poMiddleX,poMiddleY;//臨時點座標
var pixelX,pixelY,pixelX1,pixelY1;//箭頭兩個點
poMiddleX=(pixelEnd.x+pixelStart.x)/2;
poMiddleY=(pixelEnd.y+pixelStart.y)/2;
if(poMiddleX-pixelStart.x==0){ //斜率不存在時
pixelTemX=poMiddleX;
if(poMiddleY>pixelStart.y)
{
pixelTemY=poMiddleY-r;
}
else
{
pixelTemY=poMiddleY+r;
}
//已知直角三角形兩個點座標及其中一個角，求另外一個點座標算法
pixelX=pixelTemX-r*Math.tan(angle);
pixelX1=pixelTemX+r*Math.tan(angle);
pixelY=pixelY1=pixelTemY;
}
else //斜率存在時
{
delta=(poMiddleY-pixelStart.y)/(poMiddleX-pixelStart.x);
param=Math.sqrt(delta*delta+1);
if((poMiddleX-pixelStart.x)<0) //第二、三象限
{
pixelTemX=poMiddleX+ r/param;
pixelTemY=poMiddleY+delta*r/param;
}
else//第一、四象限
{
pixelTemX=poMiddleX- r/param;
pixelTemY=poMiddleY-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 pointMiddle=map.pixelToPoint(new BMap.Pixel(poMiddleX,poMiddleY));
var Arrow = new BMap.Polyline([
pointArrow,
pointMiddle,
pointArrow1
], {strokeColor:"#F00", strokeWeight:2, strokeOpacity:0.8});
map.addOverlay(Arrow);
}
}
</script>