在百度地圖繪制箭頭線

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test baidu map</title>
<style type="text/css">
#container { height:800px; width:900px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<div id="main">
			<div id="container"></div>
</div>
</body>
</html>

<script type="text/javascript">

var my_map= new BMap.Map("container");
var point = new BMap.Point(105.0, 35.0);
my_map.centerAndZoom(point, 5);
my_map.enableScrollWheelZoom();

my_map.addControl(new BMap.NavigationControl());
my_map.addControl(new BMap.ScaleControl());
my_map.addControl(new BMap.OverviewMapControl());
my_map.addControl(new BMap.MapTypeControl());

//添加3個點
addMarker(my_map, 114.502404, 38.070475, "12345", get_marker_click_func(999));
addMarker(my_map, 123.434292, 41.831783, "xxxx", get_marker_click_func(0));
addMarker(my_map, 119.291151, 26.095812, "yyyy", get_marker_click_func(1));

//添加2條線
addArrowLine(my_map, 114.502404, 38.070475, 123.434292, 41.831783, "blue", 5, 0.8, false, get_line_click_func(123));
addArrowLine(my_map, 123.434292, 41.831783, 119.291151, 26.095812, "red", 5, 0.8, true, get_line_click_func(456));

function get_marker_click_func(id)
{
	var func = function(e){
		var opts = { width : 250, height: 100, title : 0};
		var infoWindow = new BMap.InfoWindow("marker:" + id, opts);
		var point_temp = new BMap.Point(e.point.lng, e.point.lat);
		my_map.openInfoWindow(infoWindow, point_temp);
	};
	
	return func;
}

function get_line_click_func(id)
{
	var func = function(e){
		var opts = { width : 250, height: 100, title : 0};
		var infoWindow = new BMap.InfoWindow("<a target='_blank' href='http://www.baidu.com'>test</a>Bitrate:" + id, opts);
		var point_temp = new BMap.Point(e.point.lng, e.point.lat);
		my_map.openInfoWindow(infoWindow, point_temp);
	};
	
	return func;
}

function addMarker(map, x, y, marker_title, marker_click_func)
{
	var point = new BMap.Point(x, y);
	var marker = new BMap.Marker(point);
	
	marker.setTitle(marker_title);
	marker.addEventListener("click", marker_click_func);
	
	map.addOverlay(marker);
}

function addArrowLine(map, from_x, from_y, to_x, to_y, color, weight, opacity, isdashed, onclick_function)
{
	var line_style = {strokeColor:color, strokeWeight:weight, strokeOpacity:opacity};
	
	//line
	var polyline = new BMap.Polyline([new BMap.Point(from_x, from_y), new BMap.Point(to_x, to_y)], line_style);
	
	if(onclick_function != null)
		polyline.addEventListener("click", onclick_function);
	
	if(isdashed) 
		polyline.setStrokeStyle("dashed");

	map.addOverlay(polyline);
	
	//arrow
	var length = 10;
	var angleValue = Math.PI/7;
	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;
		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], line_style);
		map.addOverlay(Arrow);
	}
}
</script>