<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;}
</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 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 : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
map.addOverlay(polyline);
addArrow(polyline, 10, 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);
}
}
</script>
