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

原创 2012年10月19日 16:41:03
<!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

百度地图步行箭头和路线一致

最近又重新再过一遍百度地图的相关东西,之前有一些细节没有注意到,其中有一个路线规划的步行中,把大头针设置成一个箭头,然后这个箭头的方向与路线方向一致,这个就需要自己来写一下。 1 把大头针设置成箭头...
  • qq_27985659
  • qq_27985659
  • 2016年04月18日 13:23
  • 2907

如何利用百度地图JSAPI画带箭头的线?

百度地图JSAPI提供两种绘制多折线的方式,一种是已知多折线经纬度坐标串通过AddOverlay接口进行添加;另一种是通过在地图上鼠标单击进行绘制(鼠标绘制工具条库)。目前这两种方式只能绘制多折线,并...
  • BaiduLBS
  • BaiduLBS
  • 2013年02月05日 16:33
  • 12353

百度地图API之折线

刚接触百度地图api不久,再根据坐标数据画折线上,伤了不少脑筋,使用它想小伙伴们多,文档也算丰富, 现总结下在地图上折线的表示。 地图官方例子参考:http://developer.baidu.com...
  • u011397857
  • u011397857
  • 2015年01月09日 16:08
  • 6385

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

有方向的折线覆盖物 var map = new BMap.Map("container"); var point = new BMap.Point(121.535615,31.276...
  • chinalian
  • chinalian
  • 2012年10月19日 16:41
  • 7737

百度地图定位指针

MainActivity: package com.example.baidumap; import com.baidu.location.BDLocation; import com.baidu...
  • Rokends
  • Rokends
  • 2015年11月30日 17:47
  • 489

安卓学习笔记:让自己显示在地图上(使用百度地图API)

申请秘钥百度地图开放平台:http://lbsyun.baidu.com/注册登录后,点击下方的申请秘钥点击创建应用应用类型选择 Android SDK,这时候需要填写发布版SHA1,其获取方法如下:...
  • zjq_1314520
  • zjq_1314520
  • 2017年03月12日 14:38
  • 1188

如何利用百度地图JSAPI画带箭头的线?

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}             #l-map{height:...
  • qq_31225707
  • qq_31225707
  • 2016年10月24日 14:09
  • 202

(五) Graphivz 箭头连接方向

Ports based on the 8 compass points "n", "ne","e", "se", "s", "sw", "w" or "nw" can be specified for...
  • gyj072001
  • gyj072001
  • 2017年10月26日 10:12
  • 53

百度地图__定位显示在地图上

主要的类        1)
  • a86261566
  • a86261566
  • 2014年07月07日 15:10
  • 1736

Android百度地图(二)结合方向传感器我们自己定位哪里走

Android百度地图结合方向传感器我们自己定位哪里走本文代码在http://blog.csdn.net/xyzz609/article/details/51943556的基础上进一步修改,有兴趣的同...
  • xyzz609
  • xyzz609
  • 2016年07月19日 00:18
  • 2876
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在百度地图上显示有方向的路径
举报原因:
原因补充:

(最多只允许输入30个字)