将Google地图标记扩展为更新流畅动画？

Question

使用Google Maps API v3，我可以通过AJAX调用更新标记的多个位置。但是，它没有任何转换。下面的代码：

if (!latlong.equals(point.latlong)) { 
    point.latlong = latlong; 
    point.marker.setPosition(latlong); 
} 

的缺点是没有本土动画的方法。有没有人知道任何扩展的方法，以便标记可以流畅地“从旧”移动到新的位置？或者有什么方法可用？我一直无法找到任何文件。谢谢！

Answer 1

我没有找到任何本地方式来创建此动画。您可以使用setPosition将位置从当前点移动到最终点来创建自己的动画。下面是一个代码片段，给你一个想法：

var map = undefined; 
var marker = undefined; 
var position = [43, -89]; 

function initialize() { 

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

这或许可以被清理了一下，但会给你一个良好的开端。我正在使用JavaScript的setTimeout方法来创建动画。初始调用“过渡”会启动动画。 'transition'的参数是一个双元素数组[lat，lng]。 'transition'函数根据几个动画参数（numDeltas，delay）计算lat和lng的步长。然后它会调用'moveMarker'。函数'moveMarker'保持一个简单的计数器来指示标记何时到达最终目的地。如果不存在，它会再次自我调用。

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

希望这有助于。

鲍勃

Answer 2

如果你想流畅的动画（与宽松），低于库应该有所帮助：

https://github.com/terikon/marker-animate-unobtrusive

http://terikon.github.io/marker-animate-unobtrusive/demo/unobtrusive/markermove-sliding.html