谷歌地圖動畫標記移動

Question

所以我試圖順利移動標記，但id不起作用。 Marker正在移動，但不是很順利，如果我要寫的話，我可以擁有相同的結果

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
            );
        }
    }

Answer 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)
  }
}

你可以在這里看一個演示