碼上快樂

相關內容    簡體    繁體

使用百度地圖API實現軌跡回放

本文轉載自   查看原文   2015-12-30 10:14   13122    map

調用百度地圖API實現路線的軌跡回放功能其實很簡單，只要搞懂以下幾點即可：

 

1.需要用Polyline方法先繪制好路線圖

 

2.用Marker添加標注點

 

3.關鍵一步，通過結合定時器，使用Marker創建的標注點實例的setPosition改變標注點位置，實現播放功能

 

代碼分享，直接復制即可使用

 

 

[html]  view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>Track</title>  
  7. <style type="text/css">  
  8.     html{height:100%}  
  9.     body{height:100%;margin:0px;padding:0px}  
  10.     #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}  
  11.     #container{height:100%}  
  12. </style>    
  13. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>  
  14. <script type="text/javascript">  
  15. //獲取所有點的坐標  
  16. var points = [  
  17.     new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),  
  18.     new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),  
  19.     new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),  
  20.     new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),  
  21.     new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),  
  22.     new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)  
  23. ];  
  24.   
  25. var map;   //百度地圖對象  
  26. var car;   //汽車圖標  
  27. var label; //信息標簽  
  28. var centerPoint;  
  29.   
  30. var timer;     //定時器  
  31. var index = 0; //記錄播放到第幾個point  
  32.   
  33. var followChk, playBtn, pauseBtn, resetBtn; //幾個控制按鈕  
  34.   
  35. function init() {  
  36.     followChk = document.getElementById("follow");  
  37.     playBtn = document.getElementById("play");  
  38.     pauseBtn = document.getElementById("pause");  
  39.     resetBtn = document.getElementById("reset");  
  40.   
  41.     //初始化地圖,選取第一個點為起始點  
  42.     map = new BMap.Map("container");  
  43.     map.centerAndZoom(points[0], 15);  
  44.     map.enableScrollWheelZoom();  
  45.     map.addControl(new BMap.NavigationControl());  
  46.     map.addControl(new BMap.ScaleControl());  
  47.     map.addControl(new BMap.OverviewMapControl({isOpen: true}));  
  48.       
  49.     //通過DrivingRoute獲取一條路線的point  
  50.     var driving = new BMap.DrivingRoute(map);  
  51.     driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));  
  52.     driving.setSearchCompleteCallback(function() {  
  53.         //得到路線上的所有point  
  54.         points = driving.getResults().getPlan(0).getRoute(0).getPath();  
  55.         //畫面移動到起點和終點的中間  
  56.         centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);  
  57.         map.panTo(centerPoint);  
  58.         //連接所有點  
  59.         map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));  
  60.           
  61.         //顯示小車子  
  62.         label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});  
  63.         car = new BMap.Marker(points[0]);  
  64.         car.setLabel(label);  
  65.         map.addOverlay(car);  
  66.           
  67.         //點亮操作按鈕  
  68.         playBtn.disabled = false;  
  69.         resetBtn.disabled = false;  
  70.     });  
  71. }  
  72.   
  73. function play() {  
  74.     playBtn.disabled = true;  
  75.     pauseBtn.disabled = false;  
  76.       
  77.     var point = points[index];  
  78.     if(index > 0) {  
  79.         map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));  
  80.     }  
  81.     label.setContent("經度: " + point.lng + "<br>緯度: " + point.lat);  
  82.     car.setPosition(point);  
  83.     index++;  
  84.     if(followChk.checked) {  
  85.         map.panTo(point);  
  86.     }  
  87.     if(index < points.length) {  
  88.         timer = window.setTimeout("play(" + index + ")", 200);  
  89.     } else {  
  90.         playBtn.disabled = true;  
  91.         pauseBtn.disabled = true;  
  92.         map.panTo(point);  
  93.     }  
  94. }  
  95.   
  96. function pause() {  
  97.     playBtn.disabled = false;  
  98.     pauseBtn.disabled = true;  
  99.       
  100.     if(timer) {  
  101.         window.clearTimeout(timer);  
  102.     }  
  103. }  
  104.   
  105. function reset() {  
  106.     followChk.checked = false;  
  107.     playBtn.disabled = false;  
  108.     pauseBtn.disabled = true;  
  109.       
  110.     if(timer) {  
  111.         window.clearTimeout(timer);  
  112.     }  
  113.     index = 0;  
  114.     car.setPosition(points[0]);  
  115.     map.panTo(centerPoint);  
  116. }  
  117. </script>  
  118. </head>    
  119.      
  120. <body onload="init();">    
  121.     <div id="controller" align="center">  
  122.         <input id="follow" type="checkbox"><span style="font-size:12px;">畫面跟隨</span></input>  
  123.         <input id="play" type="button" value="播放" onclick="play();" disabled />  
  124.         <input id="pause" type="button" value="暫停" onclick="pause();" disabled />  
  125.         <input id="reset" type="button" value="重置" onclick="reset()" disabled />  
  126.     </div>  
  127.     <div id="container"></div>  
  128. </body>    
  129. </html>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用百度地圖API實現軌跡回放 Vue百度地圖軌跡回放 百度地圖API 繪制軌跡歷史 web端百度地圖API實現實時軌跡動態展現 百度地圖實現車輛軌跡移動播放(baidu map api) 百度地圖標點，信息框，繪畫工具，軌跡回放。 百度地圖軌跡回放,自定義路書,邊走邊畫線 使用百度地圖API制作線路軌跡播放 使用“天地圖”實現“百度地圖”的 GPS單點沿線運動，來模擬物體運動軌跡。 百度地圖js實現多點軌跡
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM