百度地圖軌跡展現

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。