百度地圖JavascriptApi Marker平滑移動及車頭指向行徑方向

　　相信只要是使用百度地圖做實時定位服務的朋友都會遇到這個問題,在對坐標位置進行覆蓋物展示的時候,會出現由於獲取坐標數據時間或者兩個坐標點相距過遠,導致在視覺上看Marker移動就像“僵屍跳”一樣，一蹦一蹦的給客戶看分分鍾鄙視你到不能自已。另外如果用的是有指向性圖標ICON的時候，更會引來吐槽~誒誒誒，你這小車車怎么在這個立交橋轉彎的時候車頭向着后面呢？怎么搞得嘛你！會不會弄啊你！

　　所以今天參照百度大大提供的路書開源文件實現下自己的需求，記錄一下以便提供參考。

　　一、覆蓋物在獲取坐標數據的同時，在坐標點之間平滑的移動

　　首先，之所以會出現僵屍跳的效果，是因為項目是根據實時坐標數據進行定位，所以存在一個等待新數據的過程，而對於覆蓋物的坐標改變就是一個setPosition(BMap.Point)方法而已也就造成了停頓。所以目前暫且解決方案就是：讓他這個覆蓋物在這個等待的期間找點事情做，不要一下就直接從起點蹦到終點了，慢慢的移動過去。小碎步，平滑的的移動過去~~

　　怎么移動呢?此時這個事情就可以轉化為已知起始點坐標，進行移動覆蓋物的這么過程了，說白了就是讓他覆蓋物在兩個點連成的這條線上多執行幾次setPosition(BMap.Point)，一次步子別邁那么大，只要保證在下次新坐標來之前到達就行了。
　　 那么問題又來了，這兩條線上的點我怎么知道呢？ 因為獲取到的經緯度坐標是球面坐標，所以要先轉換為平面坐標 {BMap.Pixel}= map.getMapType().getProjection().lngLatToPoint(BMap.Point);

　　 然后小運算下(參照路書開源文件）

　　

 1 /*
 2     *緩動效果
 3     *初始坐標，目標坐標，當前的步長，總的步長
 4     *@param{BMap.Pixel} initPos 初始平面坐標
 5     *@parm{BMap.Pixel} targetPos 目標平面坐標
 6     *@param{number} 當前幀數
 7     *@param {number} count 總幀數
 8     */
 9     this.linear = function (initPos, targetPos, currentCount, count) {
10         var b = initPos, c = targetPos - initPos, t = currentCount,
11         d = count;
12         return c * t / d + b;
13     }
14 
15 　　  var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
16          y = effect(_prvePoint.y, _newPoint.y, currentCount, count);

 

 　　經過計算得到的是一個平面坐標pixel(x,y)。然后再將平面坐標轉換為球面坐標給Marker進行定位即可。（這些方法在百度類庫參考文檔中都可以找得到的。魔法門： http://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E5%9C%B0%E5%9B%BE%E7%B1%BB%E5%9E%8B%E7%B1%BB）

　　　　 var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));

　　　　 修改覆蓋物定位坐標值。當然這個地方要進行多次執行也就需要個setInterval咯  這里面的

 

　　 　　 me._em._newPointMark.setPosition(pos);

　　　　  完整方法：

　　　　

 1  /**
 2     *小車移動
 3     *@param {Point} prvePoint 開始坐標(PrvePoint)
 4     *@param {Point} newPoint 目標點坐標
 5     *@param {Function} 動畫效果
 6     *@return  無返回值
 7     */
 8 
 9     this.Move = function (prvePoint, newPoint, effect, setRotation) {
10         var me = this,
11                //當前幀數
12                 currentCount = 0,
13                //初始坐標
14                _prvePoint = me._projection.lngLatToPoint(prvePoint),//將球面坐標轉換為平面坐標
15                //獲取結束點的(x,y)坐標
16                _newPoint = me._projection.lngLatToPoint(newPoint),
17                //兩點之間要循環定位的次數
18                count = me._runTime / me._intervalTimer;
19                 //兩點之間勻速移動
20                me._intervalFlag = setInterval(function () {
21                   //兩點之間當前幀數大於總幀數的時候，則說明已經完成移動
22                   if (currentCount >= count) {
23                   clearInterval(me._intervalFlag);
24                   } else {
25                 //動畫移動
26                 currentCount++;//計數
27                       var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
28                             y = effect(_prvePoint.y, _newPoint.y, currentCount, count);
29                       //根據平面坐標轉化為球面坐標
30                 var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
31                 //設置marker角度(兩點之間的距離車的角度保持一致)
32                   if (currentCount == 1) {
33                       //轉換角度                                                                                                                            
34                       setRotation(prvePoint,newPoint, me._em);
35                     }
36                       //正在移動
37 
38                 me._em._newPointMark.setPosition(pos);
39             }
40                }, me._intervalTimer);
41                me._em._prvePoint = newPoint;
42     }

 

　　　　值得注意的是，這里關鍵的就是這個count = me._runTime / me._intervalTimer; 決定了在這兩個點之間要走多少個小碎步~~

　　　　這個count的由來也得根據自身項目需求計算。

　　　　　　1，通過控制覆蓋物移動數據控制動畫效果。這種方法就需要通過 速度與每次執行的時間計算得到每次執行前進的距離，然后在與兩點之間的距離做商得到要執行的次數。（這種方法呢適合做歷史軌跡回放這種，所有坐標信息都已經知道，一個點執行完就跳到下一個坐標，只是通過控制速度來控制動畫的展示快慢）

　　　　　　2，通過控制平緩移動過程的總時間與每次執行間隔時間來控制動畫效果。此方法就是文中的示例，直接二者做商即可得到要執行的次數。（這種方法適合做實時定位使用，因為下一次定位數據是間隔多少時間后接收，這個使我們可以控制的，所以這個平緩移動的動畫過程的總時間也是可以由我們自己控制的）
　　　　

 　　　　二、車頭指向行徑方向

　　　　　這個功能其實就是改變覆蓋物的旋轉角度em._newPointMark.setRotation(number);

　　　　　只是還是那個原因，因為得到的坐標點數據是球面坐標，所以還是要先進行轉為平面坐標才好計算，然后通過三角函數tan#$%^&*( 計算后得到兩個點之間的角度值。此部分沒有太多個性化的邏輯操作，直接參照百度大大的就行了。

　　　　  

 1  /**
 2     *在每個點的真實步驟中設置小車轉動的角度
 3     *@param{BMap.Point} curPos 起點
 4      *@param{BMap.Point} targetPos 終點
 5     */
 6       this.setRotation = function (curPos, targetPos, em)
 7       {
 8           var me = this;
 9           var deg = 0;
10            curPos = map.pointToPixel(curPos);
11             targetPos = map.pointToPixel(targetPos);
12           if (targetPos.x != curPos.x) {
13               var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
14               atan = Math.atan(tan);
15               deg = atan * 360 / (2 * Math.PI);
16               if (targetPos.x < curPos.x) {
17                   deg = -deg + 90 + 90;
18               } else {
19                   deg = -deg;
20               }
21               em._newPointMark.setRotation(-deg);
22 
23           } else {
24               var disy = targetPos.y - curPos.y;
25               var bias = 0;
26               if (disy > 0)
27                   bias = -1
28               else
29                   bias = 1
30               em._newPointMark.setRotation(-bias * 90);
31           }
32           return;
33       }

 

　　　　　　參考計算方法就得了~~~

　　　　　　值此兩個功能的最基礎的及計算方法等就這么多，其他的業務邏輯需要的邏輯代碼包裹着就是自己的需求實現代碼了！

　　　　　　效果圖

　　　　　　

 

知識不在於大小，在於總結。如有錯誤不足，還請不吝指正。