在百度地图上显示有方向的路径

最新推荐文章于 2024-06-05 17:29:06 发布

chinalian

最新推荐文章于 2024-06-05 17:29:06 发布

阅读量9.7k

点赞数 1

分类专栏： JavaScript 文章标签：百度 function

本文链接：https://blog.csdn.net/chinalian/article/details/8090486

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>有方向的折线覆盖物</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div style="width:600px;height:600px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMap.Map("container");
	var point = new BMap.Point(121.535615,31.276752);
	map.centerAndZoom(point, 17);
	var points = [
	  new BMap.Point(121.5356439,31.2810635),
	  new BMap.Point(121.537615,31.278752),
	  new BMap.Point(121.535615,31.276752),
	  new BMap.Point(121.536615,31.274752),
	  new BMap.Point(121.533615,31.277752)  
	];
	var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
	map.addOverlay(polyline);
	
	for (var i = points.length - 1; i > 0; i--){
		var angle = getAngle(points[i], points[i-1]);
		drawMarker(points[i], angle);
	}
	
	//return: -PI to PI
	function getAngle(pt1, pt2){
		return Math.atan2(pt2.lat - pt1.lat, pt2.lng - pt1.lng);
	}

  function drawMarker(point, angle) {
		var iconImg = createIcon(angle);
		var marker = new BMap.Marker(point, {
			icon : iconImg
		});

		map.addOverlay(marker);
	}
	
	function createIcon(angle) {
		//从负Y轴方向开始顺时针查找角度
		var adjAngles = [180,202,225,247,270,292,315,337,0,22,45,67,90,112,135,157];
		adjAngle = angle;
	
		var adjIndex = 0;
		for (var i = 0; i < 16; i++){
			if (adjAngle < (- 15 / 16  + i / 8 ) *Math.PI) {
				adjIndex = i;
				break;
			}
		}
		
		icon = new BMap.Icon("arrow_" + adjAngles[adjIndex] + ".png", new BMap.Size(22,22));
		return icon;
	}
</script>

显示如下：

带图片文件的rar文件链接为： http://dl.vmall.com/c0cbfpxnnj

chinalian

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
8
评论
在百度地图上显示有方向的路径

有方向的折线覆盖物 var map = new BMap.Map("container"); var point = new BMap.Point(121.535615,31.276752); map.centerAndZoom(point, 17); var points = [ new BMap.Point(121.5356439,31.2810635), n
复制链接

扫一扫

专栏目录