2017-09-20 184 views
0

所以即時嘗試移動標記順利,但ID不起作用。標記是感動,但並不順利,同樣的結果,我可以有,如果我會寫谷歌地圖動畫標記移動

marker[n].setPosition(moveto); 

我已經顯示在控制檯中的所有變量,它的精緻,所有增加通過正確的方式,但它似乎是

marker[n].setPosition(latlng); 

僅在循環的最後一次迭代中被調用。

這裏是我的代碼:

function animatedMove(n, current, moveto){ 
     var lat = current.lat(); 
     var lng = current.lng(); 

     var deltalat = (moveto.lat() - current.lat())/100; 
     var deltalng = (moveto.lng() - current.lng())/100; 

     for(var i=0;i<100;i++){ 
      lat += deltalat; 
      lng += deltalng; 

      latlng = new google.maps.LatLng(lat, lng); 

      setTimeout(
       function(){ 
        marker[n].setPosition(latlng); 
       },10 
      ); 
     } 
    } 
+0

檢查[**這個樣品**](https://robsite.net/google-maps-animated-marker-move/) – codtex

+0

感謝,這代碼工作正常,但無論如何它有趣的是我做錯了什麼 –

+2

你從現在開始設置100個超時10毫秒。所有這些都在同一時間開火,標記結束了位於最後的位置... – geocodezip

回答

1

什麼你的代碼做的是

for(var i=0;i<100;i++){ 
// compute new position 
// run function "f" that updates position of marker after a delay of 10 

什麼情況是,由函數 「F」(((function(){marker[n].setPosition(latlng);})的延遲之後運行的時間,該週期已經完成,並且已經到達標記的最終位置。

正在關注https://stackoverflow.com/a/24293516/2314737這裏有一個可能的解決方案

function animatedMove(n, current, moveto) { 
    var lat = current.lat(); 
    var lng = current.lng(); 

    var deltalat = (moveto.lat() - current.lat())/100; 
    var deltalng = (moveto.lng() - current.lng())/100; 

    for (var i = 0; i < 100; i++) { 
    (function(ind) { 
     setTimeout(
     function() { 
      var lat = marker.position.lat(); 
      var lng = marker.position.lng(); 

      lat += deltalat; 
      lng += deltalng; 
      latlng = new google.maps.LatLng(lat, lng); 
      marker.setPosition(latlng); 
     }, 10 * ind 
    ); 
    })(i) 
    } 
} 

你可以看一下演示here

+0

有意思,謝謝! –