百度地图多轨迹示例

ml1658503

已于 2024-07-30 17:39:11 修改

阅读量6.3k

点赞数 2

分类专栏：百度地图文章标签：百度地图

于 2016-04-14 11:59:37 首次发布

本文链接：https://blog.csdn.net/ml1658503/article/details/51150442

版权

百度地图专栏收录该内容

3 篇文章

订阅专栏

本文分享如何使用百度地图API创建多轨迹图。作者在项目实践中发现关于百度地图轨迹图，尤其是多轨迹的资料稀缺，故详细介绍了实现多轨迹的方法，旨在帮助开发者避免遇到相同问题时耗费过多时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要接百度地图，就研究了下热力图和轨迹图。

做的过程中发现轨迹图的资料非常少，特别是多轨迹的。现在我弄出来了就分享下多轨迹的写法，希望大家少走弯路：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
	height: 100%
}


body {
	height: 100%;
	margin: 0px;
	padding: 0px
}


#container {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=9LW9kU9jKiN1lDg8dClq8MRoMjURC0Es">
	
</script>
</head>


<body>
	<div id="container"></div>
	<script type="text/javascript">
	
		/* 创建地图并添加控件begin */
		var map = new BMap.Map("container");
		map.centerAndZoom(new BMap.Point(121.421, 29.326), 13);
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.OverviewMapControl());
		map.addControl(new BMap.MapTypeControl());
		map.setCurrentCity("北京");
		/* 创建地图并添加控件end  */


		/** 三组示例坐标begin */
		var points = [ [ 121.42108474805796, 29.38674132050806 ],
				[ 121.42098523703464, 29.346739501953575 ],
				[ 121.43128777833854, 29.350523790258323 ],
				[ 121.42018950170755, 29.225924439068476 ] ];
		showPolyLine(points, "red");


		var points = [ [ 121.41108474805796, 29.32674132050806 ],
				[ 121.42098523703464, 29.326739501953575 ],
				[ 121.43128777833854, 29.310523790258323 ],
				[ 121.45018950170755, 29.3825924439068476 ] ];
		showPolyLine(points, "blue");


		var points = [ [ 121.51508474805796, 29.32674132050806 ],
				[ 121.42798523703464, 29.328739501953575 ],
				[ 121.43328777833854, 29.314523790258323 ],
				[ 121.45718950170755, 29.327924439068476 ] ];
		showPolyLine(points, "green")
		/* 三组示例坐标begin */


		function showPolyLine(points, color) {
			/* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  begin */
			var pLine = [];
			for (var i = 0; i < points.length; i++) {
				pLine.push(new BMap.Point(points[i][0], points[i][1]));
				if (i == 0 || i == points.length - 1) {//起点终点图标
					map.addOverlay(new BMap.Marker(new BMap.Point(points[i][0],
							points[i][1])));
				}
			}
			/* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  end */


			/* 添加轨迹接口begin */
			var polyline = new BMap.Polyline(pLine, {
				strokeColor : color,
				strokeWeight : 6,
				strokeOpacity : 0.5
			});
			map.addOverlay(polyline);
			/* 添加轨迹接口begin */
			
		};
	</script>
</body>
</html>

很简单的示例，这是运行效果：