将谷歌地图标记从一个位置平滑地移动到另一个位置

Question

我正在使用此脚本将Google地图标记从一个地方移动到另一个地方源扩展谷歌地图标记以在更新时流畅地制作动画？

根据我的逻辑，计算上一个位置和当前位置之间的差异并除以一个数字（例如100），然后将结果添加到先前位置100次以到达当前位置。

但是，当我将下面给出的步骤值（增量数）从 100 更改为例如 4 的任何其他数字并使循环运行 4 倍于标记位置之后与当前位置不同时。任何一个 plaese 都可以向我建议使用 No.步数（增量数）为 100，而不是任何其他数字'

var latlng = new google.maps.LatLng(position[0], position[1]);
var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "Your current location!"
});
google.maps.event.addListener(map, 'click', function(me) {
    var result = [me.latLng.lat(), me.latLng.lng()];
    transition(result);
});
}
var numDeltas = 100;
var delay = 10; //milliseconds
var i = 0;
var deltaLat;
var deltaLng;
function transition(result){
i = 0;
deltaLat = (result[0] - position[0])/numDeltas;
deltaLng = (result[1] - position[1])/numDeltas;
moveMarker();
}
 function moveMarker(){
position[0] += deltaLat;
position[1] += deltaLng;
var latlng = new google.maps.LatLng(position[0], position[1]);
marker.setPosition(latlng);
if(i!=numDeltas){
    i++;
    setTimeout(moveMarker, delay);
}
}

这是代码工作的jsFiddle：http://jsfiddle.net/rcravens/RFHKd/13/

Answer 1

你的问题是这一行：

function transition(result){
    i = 0; //<--THIS ONE

应将其设置为 i = 1; 。目前，您比应有的多移动了 1 次。当将路径与 100 分开时，它只是不那么明显，因为差异非常小，但错误始终存在。或者，您可以更改结束条件。