百度地图轨迹展现

时间 2019-11-24

标签百度地图轨迹展现繁體版

原文原文链接

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>驾车途经点</title>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
</head>  
<body>  
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>  
<script type="text/javascript">  

   	var map = new BMap.Map("container");  
   	var points = [];//原始点信息数组  
   	var point = [{"lng":116.404,"lat":39.915},
             			{"lng":116.454,"lat":39.955},
             			{"lng":116.504,"lat":39.925},
            	 			{"lng":116.514,"lat":39.925}];

    map.centerAndZoom(new BMap.Point(116.514, 39.925), 13);  
    var startPoint = new BMap.Point(116.404, 39.915);    // 起点 
    var endPoint = new BMap.Point(116.514, 39.925);    // 终点

        //自适应屏幕
		var view = map.getViewport(eval(point));  
		var mapZoom = view.zoom;   
		var centerPoint = view.center;   
		map.centerAndZoom(centerPoint,mapZoom);  

		map.enableScrollWheelZoom(true);  //滚轮实现方法缩小 
		dynamicLine();


		function dynamicLine(){  
		    var startIcon = new BMap.Icon("/Users/sorin/Desktop/startMark.png",new BMap.Size(32,32),{anchor: new BMap.Size(20, 30)});
		    var startMarker = new BMap.Marker(startPoint,{icon:startIcon});
		    var endIcon = new BMap.Icon("/Users/sorin/Desktop/endMark.png",new BMap.Size(32,32),{anchor: new BMap.Size(12, 30)});
		    var endMarker = new BMap.Marker(endPoint,{icon:endIcon})
		    map.addOverlay(startMarker);
		    map.addOverlay(endMarker);
		
		    points.slice(startPoint, endPoint);//最后两个点用来画线。  
		    addLine(point);//增长轨迹线  
		}  
		//添加线  
		function addLine(points){  
		    var linePoints = [],pointsLen = points.length,i,polyline;  
		    if(pointsLen == 0){  
		        return;  
		    }  
		    // 建立标注对象并添加到地图     
		    for(i = 0;i <pointsLen;i++){  
		        linePoints.push(new BMap.Point(points[i].lng,points[i].lat));  
		    }  
		    polyline = new BMap.Polyline(linePoints, {strokeColor:"blue", strokeWeight:5, strokeOpacity:1});   //建立折线  
		    map.addOverlay(polyline);   //增长折线  
		}
		// 设置地图隐藏部分信息
		var myStyleJson = [{
		                	"featureType": "highway",
		                	"featureType": "label",
		                	"elementType": "labels",
		                	"stylers": {"visibility": "off"}
						  }];
		map.setMapStyle({styleJson: myStyleJson });

</script>  
</body>  
</html>

一、设置地图隐藏部分信息，设置方式为：javascript

百度地图api首页最下面“地图编辑工具”——>“开始编辑”，将设置后的json拷贝到文件便可。html