JS Google Maps API v3在坐标之间设置动画标记

Question

我有一个简单的javascript地图应用程序,我正在努力,需要我动画不同坐标之间的多个标记的运动.每个标记可以自由移动,所有标记都存储在数组列表中.但是,我一直无法让他们顺利过渡到位置.

我做了大量的研究和试验/错误,但没有运气,任何人都有运气吗？

Answer 1

我的快速和肮脏的方法不涉及大量的研究:(

这是演示:http://jsfiddle.net/yV6xv/4/单击标记开始移动它,停止后,您可以再次单击返回其初始点.在运动中单击会产生奇怪的结果.

起点和终点是预定义的initialize().通过将起点和终点分成100个段来定义动画,并将标记放置在这些点上并设置间隔.因此动画时间是固定的:标记比较短的距离"更快"地传播更长的距离.

我没有做太多测试,我知道点击一个移动的标记会产生意想不到的结果(起点和终点错位)

这是演示的"有趣"部分:

      // store a LatLng for each step of the animation
      frames = [];
      for (var percent = 0; percent < 1; percent += 0.01) {
        curLat = fromLat + percent * (toLat - fromLat);
        curLng = fromLng + percent * (toLng - fromLng);
        frames.push(new google.maps.LatLng(curLat, curLng));
      }

      move = function(marker, latlngs, index, wait, newDestination) {
        marker.setPosition(latlngs[index]);
        if(index != latlngs.length-1) {
          // call the next "frame" of the animation
          setTimeout(function() { 
            move(marker, latlngs, index+1, wait, newDestination); 
          }, wait);
        }
        else {
          // assign new route
          marker.position = marker.destination;
          marker.destination = newDestination;
        }
      }

      // begin animation, send back to origin after completion
      move(marker, frames, 0, 20, marker.position);

Answer 2

您可以使用marker-animate-unobtrusive库来使标记从一个位置平滑过渡到另一个位置.

您可以像这样初始化您的标记:

var marker = new SlidingMarker({
   //your original marker options
   //...
   duration: 1000
});

通过此定义,您的标记将在1秒内平稳地移动到新位置,只需调用marker.setPosition().

如果您想要来回设置标记,只需每秒切换一次setPosition.

setTimeout(function() {
   var newPosition = /* select new position */
   marker.setPosition(newPosition)
}, 1000);

PS我是图书馆的作者.

Answer 3

我不确定它是否是您正在寻找的但我会分享它:我编写此代码来模拟具有特定速度(km/h)的汽车的运动.您只需指定您希望标记/汽车前往的每个点的坐标(然后它将为坐标之间的标记设置动画).

我修改了rcravens的答案来达到这个目的:

var map, marker;
var startPos = [42.42679066670903, -83.29210638999939];
var speed = 50; // km/h

var delay = 100;
// If you set the delay below 1000ms and you go to another tab,
// the setTimeout function will wait to be the active tab again
// before running the code.
// See documentation :
// https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs

function animateMarker(marker, coords, km_h)
{
    var target = 0;
    var km_h = km_h || 50;
    coords.push([startPos[0], startPos[1]]);

    function goToPoint()
    {
        var lat = marker.position.lat();
        var lng = marker.position.lng();
        var step = (km_h * 1000 * delay) / 3600000; // in meters

        var dest = new google.maps.LatLng(
        coords[target][0], coords[target][2]);

        var distance =
        google.maps.geometry.spherical.computeDistanceBetween(
        dest, marker.position); // in meters

        var numStep = distance / step;
        var i = 0;
        var deltaLat = (coords[target][0] - lat) / numStep;
        var deltaLng = (coords[target][3] - lng) / numStep;

        function moveMarker()
        {
            lat += deltaLat;
            lng += deltaLng;
            i += step;

            if (i < distance)
            {
                marker.setPosition(new google.maps.LatLng(lat, lng));
                setTimeout(moveMarker, delay);
            }
            else
            {   marker.setPosition(dest);
                target++;
                if (target == coords.length){ target = 0; }

                setTimeout(goToPoint, delay);
            }
        }
        moveMarker();
    }
    goToPoint();
}

function initialize()
{
    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(42.425175091823974, -83.2943058013916),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(startPos[0], startPos[1]),
        map: map
    });

    google.maps.event.addListenerOnce(map, 'idle', function()
    {
        animateMarker(marker, [
            // The coordinates of each point you want the marker to go to.
            // You don't need to specify the starting position again.
            [42.42666395645802, -83.29694509506226],
            [42.42300508749226, -83.29679489135742],
            [42.42304468678425, -83.29434871673584],
            [42.424882066428424, -83.2944130897522],
            [42.42495334300206, -83.29203128814697]
        ], speed);
    });
}

initialize();

jsfiddle - DEMO

请注意,当您将谷歌地图包括在内时,您需要添加"几何"库google.maps.geometry.spherical.computeDistanceBetween:http: //maps.google.com/maps/api/js？seamor = true& library = geometry

希望能帮助到你!