android 百度地图 折线上 点,百度地图怎么在折线的中点画箭头标识方向

怎么在折线的中点画箭头标识方向，这个问题纠结了我很久，后来发现其实很简单，在网上有一个在端点画箭头的例子，其实我们可以把它改造成在中间点画，但是箭头的大小会随缩放的级别的变化而变化。这个怎么解决呢？我们只要加一个监听就可以了，每次把它重画不就保持大小了。代码如下：

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;}

折线

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

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);

}

}