在更新时将Google地图标记扩展为平滑动画？ [英] Extend Google Maps marker to animate smoothly on update?

问题描述

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

  if（！latlong.equals（point.latlong））{
 point.latlong = latlong; 
 point.marker.setPosition（latlong）; 
 
 $ / code> 

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

解决方案

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

  var map = undefined; 
 var marker = undefined; 
 var position = [43，-89]; 
 
函数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（{
位置：latlng，
地图：地图，
标题：您当前的位置！
 }）; 
 
 google.maps.event.addListener（map，'click'，function（me）{
 var result = [me.latLng.lat（），me.latLng.lng（） ]; 
转换（结果）; 
}）; 
} 
 
 var numDeltas = 100; 
 var delay = 10; //毫秒
 var i = 0; 
 var deltaLat; 
 var deltaLng; 
函数转换（结果）{
 i = 0; 
 deltaLat =（result [0]  -  position [0]）/ numDeltas; 
 deltaLng =（result [1]  -  position [1]）/ numDeltas; 
 moveMarker（）; 
 
 
函数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）; 
 
 
 
 
 
 
 $ b 
这可能会被清除一些，但会给你一个好的开始。我正在使用JavaScript的setTimeout方法来创建动画。初始调用过渡会启动动画。 'transition'的参数是一个双元素数组[lat，lng]。 'transition'函数根据几个动画参数（numDeltas，delay）计算lat和lng的步长。然后它会调用'moveMarker'。函数'moveMarker'保持一个简单的计数器来指示标记何时到达最终目的地。如果不存在，它会再次调用它自己。
 
 
 
这是一个工作代码的jsFiddle： http://jsfiddle.net/rcravens/RFHKd/13/  
 
 
 
希望这会有所帮助。
 
 
  Bob  
Using the Google Maps API v3 I've been able to update multiple positions of markers via an AJAX call. However, it lacks any transition. Code below:
if ( !latlong.equals( point.latlong ) ) {
    point.latlong = latlong;
    point.marker.setPosition(latlong);
}
The drawback is that setPosition has no native animation method. Does anyone know any methods for extending setPosition so the marker can fluently "move" from it's old to new position? Or any methods available? I have not been able to find any documentation. Thanks!
解决方案
I did not find any native way to create this animation. You can create your own animation by stepping the position from the current point to the final point using the setPosition. Here is a code snippet to give you an idea:
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);
    }
}
This can probably be cleaned up a bit, but will give you a good start. I am using JavaScript's setTimeout method to create the animation. The initial call to 'transition' gets the animation started. The parameter to 'transition' is a two element array [lat, lng]. The 'transition' function calculates the step sizes for lat and lng based upon a couple of animation parametes (numDeltas, delay). It then calls 'moveMarker'. The function 'moveMarker' keeps a simple counter to indicate when the marker has reached the final destination. If not there, it calls itself again.

Here is a jsFiddle of the code working: http://jsfiddle.net/rcravens/RFHKd/13/

Hope this helps.

Bob

                        
这篇关于在更新时将Google地图标记扩展为平滑动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！