百度地图显示车辆运行轨迹（静态）

最新推荐文章于 2023-10-08 11:57:24 发布

原创最新推荐文章于 2023-10-08 11:57:24 发布 · 1.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #前端

Map地图专栏收录该内容

14 篇文章

订阅专栏

百度地图开发常用网站

1、百度地图开放平台

百度地图开放平台 | 百度地图API SDK | 地图开发

2、百度地图 Javascript API

3、JavaScript API v2.0类参考

百度地图JSAPI 2.0类参考

4、百度地图示例DEMO（JavaScript API v2.0）

地图JS API示例 | 百度地图开放平台

5、百度地图 ak 申请：（JavaScript API v2.0）

jspopular | 百度地图API SDK

6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能

jspopular | 百度地图API SDK

7、百度地图坐标拾取系统

拾取坐标系统

说明

项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。

JavaScript API Lite是移动端浏览器上构建地图应用

百度地图点击图层显示信息窗口

1、百度地图 ak 申请：（JavaScript API v2.0）

jspopular | 百度地图API SDK

2、实现效果图如下：

首先说明一下，这个功能主要是完成后台在地图上图层显示车辆的运行轨迹（线），一般车辆的轨迹可能通过app采集或车载终端上传到服务器。

3、网页源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度地图显示车辆运行轨迹（静态）</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script>
		<!--  你在百度地图开放平台申请的ak -->
	</head>
	<body>
		<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
		<script type="text/javascript">
		//添加鼠标单击事件、鼠标触发事件	
		function addMarkerClickHandler( content, marker , showType) {
			//图层点击事件，像是详细信息
	    	marker.addEventListener("click", function (e) {
		        openInfo(content, e);
		    });
		    //鼠标经过图层时的操作
		    marker.addEventListener("mouseover", function (e) {
		        marker.setTop(true);//设置显示在最上面，防止多图层显示在相同位置时 无法知道时哪个图层
		        marker.setIcon(icon_highlight);//设置图层高亮显示
		        if (marker.getLabel()) {
		            marker.getLabel().show();
		        }
		    });
		    //鼠标离开图层后的操作
		    marker.addEventListener("mouseout", function (e) {
		        marker.setTop(false);
		        //显示不同的颜色显示标签
		        //showType
		        //复原图层的原始图标
		        if (showType == "1") {
		            marker.setIcon(icon_red);
		        } else if (showType == "2") {
		            marker.setIcon(icon_green);
		        }
		        //隐藏图层标签内容
		        if (marker.getLabel()){
		            marker.getLabel().hide();
		        }
		    });
		}	
		
		//显示信息窗口参数及显示函数
		/** 信息窗口参数 */
		var opts = {
			width : 220, // 信息窗口宽度
			//height : 200, // 信息窗口高度
			//title : "详细信息" , // 信息窗口标题
			enableMessage : false// 设置允许信息窗发送短息
		};
		function openInfo(content, e) {
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
			map.openInfoWindow(infoWindow, point); // 开启信息窗口
		}
			
			
        var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });
        var point = new BMap.Point(116.128554, 24.294562);
        var top_left_navigation = new BMap.NavigationControl();
        map.addControl(top_left_navigation);// 添加平移缩放控件
        map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
        map.enableScrollWheelZoom();//启用滚轮放大缩小
        map.centerAndZoom(point, 9);
        var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
        map.addControl(bmp_type);
       
	   
	    //显示车辆轨迹线
		//车辆轨迹坐标
		var latLngArray = [
			"113.408984,23.174023",
			"113.406639,23.174023",
			"113.403944,23.173566",
			"113.400827,23.17394",
			"113.397468,23.174496",
			"113.391494,23.174513",
			"113.389032,23.174588",
			"113.388736,23.173217",
			"113.388511,23.171888",
			"113.388592,23.170501",
			"113.38861,23.170219",
			"113.38861,23.168342",
			"113.388574,23.165218"
		];
		//中心点坐标
		var  carCenterPoint = new BMap.Point(113.408984, 23.174023);
		
		//轨迹显示样式
		var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
			scale: 0.6,//图标缩放大小
			strokeColor: '#fff',//设置矢量图标的线填充颜色
			strokeWeight: '2',//设置线宽
		});
		var icons = new BMap.IconSequence(sy, '10', '30');
		// 创建polyline对象
		var pois = [];
		var carOpts = {
			position: carCenterPoint,    // 指定文本标注所在的地理位置
			offset: new BMap.Size(30, -30)    //设置文本偏移量
		}
		var carlabel = new BMap.Label("某车辆轨迹", carOpts);  // 创建文本标注对象
		carlabel.setStyle({
			color: "red",
			fontSize: "12px",
			height: "20px",
			lineHeight: "20px",
			fontFamily: "微软雅黑"
		});
		map.addOverlay(carlabel);
		map.centerAndZoom(carCenterPoint , 17);
		for(var i = 0; i < latLngArray.length ; i++) {
			var latLng = latLngArray[i];
			var pointArray = latLng.split(",");
			pois.push(new BMap.Point(pointArray[0], pointArray[1]));
		}
		var polyline = new BMap.Polyline(pois, {
			enableEditing: false,//是否启用线编辑，默认为false
			enableClicking: true,//是否响应点击事件，默认为true
			icons: [icons],
			strokeWeight: '8',//折线的宽度，以像素为单位
			strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
			strokeColor: "#18a45b" //折线颜色
		});
		map.addOverlay(polyline);
	   
 
    </script>
	</body>
	
</html>