一 . 最近在弄智能調度系統，就需要在地圖上實現模擬車輛的某一個時間段的運動軌跡。
百度地圖已經有了這個Demo的示例。附上GPS-單點沿線運動Demo鏈接：http://developer.baidu.com/map/jsdemo.htm#c2_5
二 . 在這個Demo上進行改造的百度地圖如下圖所示：
百度地圖實現代碼如下：
<!DOCTYPE html> <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TUaQdFgQ4GTsZjGGRCHWDCsx"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> <title>百度地圖--單個標注點沿線的軌跡運動</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var curve; var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.403694,39.91582), 12); var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小車圖片 //offset: new BMap.Size(0, -5), //相當於CSS精靈 imageOffset: new BMap.Size(0, 0) //圖片的偏移量。為了是圖片底部中心對准坐標點。 }); var points; var ps=[]; ps.push(new BMap.Point(116.306533,39.890581)); ps.push(new BMap.Point(116.403694,39.91582)); ps.push(new BMap.Point(116.475558,39.962733)); ps.push(new BMap.Point(116.555472,39.916706)); ps.push(new BMap.Point(116.529025,39.869762)); window.run = function (){ var pts = ps; //通過駕車實例，獲得一系列點的數組 var paths = pts.length; //獲得有幾個點 var carMk = new BMap.Marker(pts[0],{icon:myIcon}); map.addOverlay(carMk); points = [pts[0],pts[1]]; curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //創建弧線對象 map.addOverlay(curve); //添加到地圖中 carMk.setPosition(pts[1]); i=1; function resetMkPoint(i){ points = [pts[i-1],pts[i]]; curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //創建弧線對象 map.addOverlay(curve); //添加到地圖中 carMk.setPosition(pts[i]); if(i < paths){ setTimeout(function(){ i++; resetMkPoint(i); },500); } } setTimeout(function(){ resetMkPoint(2); },500) } setTimeout(function(){ run(); },100); </script>
參考百度地圖代碼，使用天地圖來模擬的頁面效果。如下圖所示：
天地圖實現代碼如下：
<!DOCTYPE html> <html> <head> <meta name="keywords" content="天地圖" charset="utf-8"/> <title>天地圖－地圖API－范例－畫線</title> <script language="javascript" src="http://api.tianditu.com/js/maps.js"></script> </head> <body> <button type="button" onclick="goRun()">Click Me!</button> <br/> <div id="mapDiv" style="position:absolute;width:100%; height:90%"></div> </body> <script language="javascript"> var map,zoom = 11,points,line; var myIcon = new TIcon("http://api.tianditu.com/img/map/markerA.png",new TSize(19,27),{anchor:new TPixel(9,27)}); //初始化地圖對象 map=new TMap("mapDiv"); //設置顯示地圖的中心點和級別 map.centerAndZoom(new TLngLat(116.403694,39.91582),zoom); points = []; points.push(new TLngLat(116.306533,39.890581)); points.push(new TLngLat(116.403694,39.91582)); points.push(new TLngLat(116.475558,39.962733)); points.push(new TLngLat(116.555472,39.916706)); points.push(new TLngLat(116.529025,39.869762)); function goRun(){ var pts = points; //通過駕車實例，獲得一系列點的數組 var paths = pts.length; //獲得有幾個點 var carMk = new TMarker(pts[0],{icon:myIcon});//地圖添加自定義標識 points = [pts[0],pts[1]]; line = new TPolyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //創建線對象 map.addOverLay(carMk); map.addOverLay(line); //添加到地圖中 carMk.setLngLat(pts[1]); function resetMkPoint(i){ carMk.setLngLat(pts[i]); points = [pts[i-1],pts[i]]; line = new TPolyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //創建線對象 map.addOverLay(line); //添加到地圖中 if(i < paths){ setTimeout(function(){ i++; resetMkPoint(i); },500); } } setTimeout(function(){ resetMkPoint(2); },500) } </script> </html>
三 . 總結。
天地圖與百度地圖的代碼很相似，天地圖的功能，基本可以通過百度地圖代碼來改造，雖然天地圖示例Demo沒有百度地圖全面，但是通過百度地圖對比來開發，基本的功能實現不難。