這篇文章給大家介紹如何理解JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元溫州做網(wǎng)站,已為上家服務(wù),為溫州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

相信只要是使用百度地圖做實(shí)時(shí)定位服務(wù)的朋友都會(huì)遇到這個(gè)問(wèn)題,在對(duì)坐標(biāo)位置進(jìn)行覆蓋物展示的時(shí)候,會(huì)出現(xiàn)由于獲取坐標(biāo)數(shù)據(jù)時(shí)間或者兩個(gè)坐標(biāo)點(diǎn)相距過(guò)遠(yuǎn),導(dǎo)致在視覺(jué)上看Marker移動(dòng)就像“僵尸跳”一樣，一蹦一蹦的給客戶看分分鐘鄙視你到不能自已。另外如果用的是有指向性圖標(biāo)ICON的時(shí)候，更會(huì)引來(lái)吐槽~誒誒誒，你這小車車怎么在這個(gè)立交橋轉(zhuǎn)彎的時(shí)候車頭向著后面呢？怎么搞得嘛你！會(huì)不會(huì)弄啊你！

一、覆蓋物在獲取坐標(biāo)數(shù)據(jù)的同時(shí)，在坐標(biāo)點(diǎn)之間平滑的移動(dòng)

首先，之所以會(huì)出現(xiàn)僵尸跳的效果，是因?yàn)轫?xiàng)目是根據(jù)實(shí)時(shí)坐標(biāo)數(shù)據(jù)進(jìn)行定位，所以存在一個(gè)等待新數(shù)據(jù)的過(guò)程，而對(duì)于覆蓋物的坐標(biāo)改變就是一個(gè)setPosition(BMap.Point)方法而已也就造成了停頓。所以目前暫且解決方案就是：讓他這個(gè)覆蓋物在這個(gè)等待的期間找點(diǎn)事情做，不要一下就直接從起點(diǎn)蹦到終點(diǎn)了，慢慢的移動(dòng)過(guò)去。小碎步，平滑的的移動(dòng)過(guò)去~~

怎么移動(dòng)呢?此時(shí)這個(gè)事情就可以轉(zhuǎn)化為已知起始點(diǎn)坐標(biāo)，進(jìn)行移動(dòng)覆蓋物的這么過(guò)程了，說(shuō)白了就是讓他覆蓋物在兩個(gè)點(diǎn)連成的這條線上多執(zhí)行幾次setPosition(BMap.Point)，一次步子別邁那么大，只要保證在下次新坐標(biāo)來(lái)之前到達(dá)就行了。

那么問(wèn)題又來(lái)了，這兩條線上的點(diǎn)我怎么知道呢？ 因?yàn)楂@取到的經(jīng)緯度坐標(biāo)是球面坐標(biāo)，所以要先轉(zhuǎn)換為平面坐標(biāo)

{BMap.Pixel}= map.getMapType().getProjection().lngLatToPoint(BMap.Point);

然后小運(yùn)算下(參照路書開(kāi)源文件）

/*
 *緩動(dòng)效果
 *初始坐標(biāo)，目標(biāo)坐標(biāo)，當(dāng)前的步長(zhǎng)，總的步長(zhǎng)
 *@param{BMap.Pixel} initPos 初始平面坐標(biāo)
 *@parm{BMap.Pixel} targetPos 目標(biāo)平面坐標(biāo)
 *@param{number} 當(dāng)前幀數(shù)
 *@param {number} count 總幀數(shù)
 */
 this.linear = function (initPos, targetPos, currentCount, count) {
  var b = initPos, c = targetPos - initPos, t = currentCount,
  d = count;
  return c * t / d + b;
 }
　　 var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
  y = effect(_prvePoint.y, _newPoint.y, currentCount, count);

經(jīng)過(guò)計(jì)算得到的是一個(gè)平面坐標(biāo)pixel(x,y)。然后再將平面坐標(biāo)轉(zhuǎn)換為球面坐標(biāo)給Marker進(jìn)行定位即可。（這些方法在百度類庫(kù)參考文檔中都可以找得到的。魔法門： 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));

修改覆蓋物定位坐標(biāo)值。當(dāng)然這個(gè)地方要進(jìn)行多次執(zhí)行也就需要個(gè)setInterval咯  這里面的

me._em._newPointMark.setPosition(pos);

完整方法：

/**
 *小車移動(dòng)
 *@param {Point} prvePoint 開(kāi)始坐標(biāo)(PrvePoint)
 *@param {Point} newPoint 目標(biāo)點(diǎn)坐標(biāo)
 *@param {Function} 動(dòng)畫效果
 *@return 無(wú)返回值
 */
 this.Move = function (prvePoint, newPoint, effect, setRotation) {
  var me = this,
    //當(dāng)前幀數(shù)
    currentCount = 0,
    //初始坐標(biāo)
    _prvePoint = me._projection.lngLatToPoint(prvePoint),//將球面坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)
    //獲取結(jié)束點(diǎn)的(x,y)坐標(biāo)
    _newPoint = me._projection.lngLatToPoint(newPoint),
    //兩點(diǎn)之間要循環(huán)定位的次數(shù)
    count = me._runTime / me._intervalTimer;
    //兩點(diǎn)之間勻速移動(dòng)
    me._intervalFlag = setInterval(function () {
     //兩點(diǎn)之間當(dāng)前幀數(shù)大于總幀數(shù)的時(shí)候，則說(shuō)明已經(jīng)完成移動(dòng)
     if (currentCount >= count) {
     clearInterval(me._intervalFlag);
     } else {
    //動(dòng)畫移動(dòng)
    currentCount++;//計(jì)數(shù)
      var x = effect(_prvePoint.x, _newPoint.x, currentCount, count),
       y = effect(_prvePoint.y, _newPoint.y, currentCount, count);
      //根據(jù)平面坐標(biāo)轉(zhuǎn)化為球面坐標(biāo)
    var pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
    //設(shè)置marker角度(兩點(diǎn)之間的距離車的角度保持一致)
     if (currentCount == 1) {
      //轉(zhuǎn)換角度                     setRotation(prvePoint,newPoint, me._em);
     }
      //正在移動(dòng)
    me._em._newPointMark.setPosition(pos);
   }
    }, me._intervalTimer);
    me._em._prvePoint = newPoint;
 }

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

這個(gè)count的由來(lái)也得根據(jù)自身項(xiàng)目需求計(jì)算。

1，通過(guò)控制覆蓋物移動(dòng)數(shù)據(jù)控制動(dòng)畫效果。這種方法就需要通過(guò) 速度與每次執(zhí)行的時(shí)間計(jì)算得到每次執(zhí)行前進(jìn)的距離，然后在與兩點(diǎn)之間的距離做商得到要執(zhí)行的次數(shù)。（這種方法呢適合做歷史軌跡回放這種，所有坐標(biāo)信息都已經(jīng)知道，一個(gè)點(diǎn)執(zhí)行完就跳到下一個(gè)坐標(biāo)，只是通過(guò)控制速度來(lái)控制動(dòng)畫的展示快慢）

2，通過(guò)控制平緩移動(dòng)過(guò)程的總時(shí)間與每次執(zhí)行間隔時(shí)間來(lái)控制動(dòng)畫效果。此方法就是文中的示例，直接二者做商即可得到要執(zhí)行的次數(shù)。（這種方法適合做實(shí)時(shí)定位使用，因?yàn)橄乱淮味ㄎ粩?shù)據(jù)是間隔多少時(shí)間后接收，這個(gè)使我們可以控制的，所以這個(gè)平緩移動(dòng)的動(dòng)畫過(guò)程的總時(shí)間也是可以由我們自己控制的）　

二、車頭指向行徑方向

這個(gè)功能其實(shí)就是改變覆蓋物的旋轉(zhuǎn)角度em._newPointMark.setRotation(number);

只是還是那個(gè)原因，因?yàn)榈玫降淖鴺?biāo)點(diǎn)數(shù)據(jù)是球面坐標(biāo)，所以還是要先進(jìn)行轉(zhuǎn)為平面坐標(biāo)才好計(jì)算，然后通過(guò)三角函數(shù)tan#$%^&*( 計(jì)算后得到兩個(gè)點(diǎn)之間的角度值。此部分沒(méi)有太多個(gè)性化的邏輯操作，直接參照百度大大的就行了。

/**
 *在每個(gè)點(diǎn)的真實(shí)步驟中設(shè)置小車轉(zhuǎn)動(dòng)的角度
 *@param{BMap.Point} curPos 起點(diǎn)
  *@param{BMap.Point} targetPos 終點(diǎn)
 */
  this.setRotation = function (curPos, targetPos, em)
  {
   var me = this;
   var deg = 0;
   curPos = map.pointToPixel(curPos);
   targetPos = map.pointToPixel(targetPos);
   if (targetPos.x != curPos.x) {
    var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
    atan = Math.atan(tan);
    deg = atan * 360 / (2 * Math.PI);
    if (targetPos.x < curPos.x) {
     deg = -deg + 90 + 90;
    } else {
     deg = -deg;
    }
    em._newPointMark.setRotation(-deg);
   } else {
    var disy = targetPos.y - curPos.y;
    var bias = 0;
    if (disy > 0)
     bias = -1
    else
     bias = 1
    em._newPointMark.setRotation(-bias * 90);
   }
   return;
  }

參考計(jì)算方法就得了~~~

值此兩個(gè)功能的最基礎(chǔ)的及計(jì)算方法等就這么多，其他的業(yè)務(wù)邏輯需要的邏輯代碼包裹著就是自己的需求實(shí)現(xiàn)代碼了！

效果圖

關(guān)于如何理解JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：如何理解JavascriptApiMarker平滑移動(dòng)及車頭指向行徑方向
文章出自：http://www.rwnh.cn/article44/gdgdhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制開(kāi)發(fā)、網(wǎng)站導(dǎo)航、外貿(mào)建站、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)