以下使用的座標點是公司應用採集來的數據，大家可以在百度地圖座標拾取工具裏面拾取到座標來替換文章中的座標。
方案一：DrivingRoute
原理是使用百度地圖的DrivingRoute駕駛導航來拼接我們的GPS點，形成完整的線路。
優點：採集GPS點的時候不用過於密集。
缺點：當線路過長，GPS點過多會導致響應過慢；當用戶不按照導航的線路來行駛，畫出來的行駛軌跡跟真正的行駛軌跡不吻合。
實現：先循環GPS點，用第一個點做起點，第二點做終點，以此類推，來循環調用DrivingRoute，這樣拼接起來就形成了線路。
<!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=aGf0sLjv7DOonc61fINdATGez2d3O8xB"></script>
<style type="text/css">
body,html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#map_canvas {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
/**採集到的GPS點**/
var PointArr = [{"x":106.6621950000,"y":26.6271700000},
{"x":106.6622350000,"y":26.6271700000},
{"x":106.7329920000,"y":26.6110190000},
{"x":106.7739370000,"y":26.6371410000},
{"x":106.7786660000,"y":26.6372330000}];
var p = Math.ceil(PointArr.length / 2);
map.centerAndZoom(new BMap.Point(PointArr[p].x, PointArr[p].y), 13);
var driving;
for(var i in PointArr){
if(i == 0 ){
addMarker(new BMap.Point(PointArr[i].x, PointArr[i].y),"起點");
continue;
}
driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false},
onMarkersSet:function(routes) {
map.removeOverlay(routes[0].marker); //刪除API自帶起點
map.removeOverlay(routes[1].marker); //刪除API自帶終點
}});
driving.search(new BMap.Point(PointArr[i-1].x, PointArr[i-1].y),
new BMap.Point(PointArr[i].x, PointArr[i].y));
if(i == PointArr.length -1){
addMarker(new BMap.Point(PointArr[i].x, PointArr[i].y),"終點");
}
}
/**
* 標記
* @param {Object} point
*/
function addMarker(point,name){
var marker = new BMap.Marker(point);
var label = new BMap.Label(name, {
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
map.addOverlay(marker);
}
</script>
</body>
</html>
運行結果：
方案二：自定義線路
原理就是使用百度地圖的BMap.Polyline來畫出GPS點的線路。每個點都自己畫，不使用百度地圖提供的DrivingRoute駕駛導航來實現。
優點：如果在GPS完美採集的情況下，畫出來的線路非常的精準，基本跟正真的行駛軌跡一致。
缺點：如果在GPS採集不完整的情況下，將會在地圖上出現很長的一條直線...
實現：直接使用Polyline來實現，先將我們的GPS點讀取出來，轉換成百度的BMap.Point對象，然後將轉換號的BMap.Point對象全部添加到數組裏面去，在將數組傳入BMap.Polyline的構造函數，最後調用map.addOverlay就大功告成了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";}
#allmap{height:500px;width:100%;}
</style>
<!--
作者：[email protected]
描述：ak：這裏的ak是需要在百度應用裏面申請的
-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aGf0sLjv7DOonc61fINdATGez2d3O8xB"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>查詢出車輛行駛軌跡</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom();
var runLine =[];
function initMap(){
//讀取後臺數據.這裏直接讀取json文件
var dataroot="json/run.json";
jQuery.getJSON(dataroot, function(data){
runLine=data;
//設置地圖中心點(已GPS數組中間的點爲中心點)
var centre = runLine[parseInt(runLine.length/2)]
map.centerAndZoom(new BMap.Point(centre.lng, centre.lat), 13);
var arrPois = [];
//將後臺讀取到的GPS點信息，全部存儲爲百度的BMap.Point座標點對象並用數組裝起來
jQuery.each(runLine,function(i, n) {
arrPois.push(new BMap.Point(n.lng,n.lat));
});
/**添加終點和起點的標記**/
addMarker(new BMap.Point(runLine[0].lng,runLine[0].lat),'終點');
addMarker(new BMap.Point(runLine[runLine.length-1].lng,runLine[runLine.length-1].lat),'起點');
//創建線路
var polyline = new BMap.Polyline(
arrPois,//所有的GPS座標點
{
strokeColor : "#009933", //線路顏色
strokeWeight : 4,//線路大小
//線路類型(虛線)
strokeStyle : "dashed"});
//繪製線路
map.addOverlay(polyline);
});
}
/**
* 標記
* @param {Object} point
*/
function addMarker(point,name){
var marker = new BMap.Marker(point);
var label = new BMap.Label(name, {
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
map.addOverlay(marker);
}
//初始化地圖
initMap();
</script>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
PS：顯示不是難點，難點在於GPS點的採集上。尤其是Android的新機型，現在的機器都加上了自動清除高耗電的後臺應用。一言不合就被系統刪了，不說了，都是淚啊，現在我都還在各種爬坑中。
另外奉勸各位猿，千萬不要輕易承諾能快速掌握你不懂的開發技術，比如像我，說自己稍微學一學就能開發Android，現在我就傻逼掉了。
