Javascript 如何沿路线设置自定义谷歌地图标记的动画？

我已经使用JavaScript和GoogleMapsAPI为手持设备编写了一个小应用程序，现在我需要使用计时器功能在地图上的任意位置移动标记图标。我有一个男人图标，我需要在地图上自动移动它。我怎样才能做到这一点？

不幸的是，官方的GMaps集合中没有自动标记移动功能

然而，如果你有一个灌浆，这将意味着你有一组点。要循环完成布线步骤，可以使用以下方法：

for (var c = 0; c < yourroute.getNumSteps(); c++) { 
    yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
}

---

为了实现更平滑的移动，您可以从已有的点中插入点。

一个非常酷的例子如下：

---

这是我的解决方案，它与v3 API一起工作。这将不以固定速度为标记设置动画，而是基于计算的路线持续时间。有一个速度因素，例如，你可以比实际速度快10倍

我试着做得尽可能简单。请随意使用它

var autoDriveSteps = new Array();
var speedFactor = 10; // 10x faster animated drive

function setAnimatedRoute(origin, destination, map) {
    // init routing services
    var directionsService = new google.maps.DirectionsService;
    var directionsRenderer = new google.maps.DirectionsRenderer({
        map: map
    });

    //calculate route
    directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        },
        function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                // display the route
                directionsRenderer.setDirections(response);

                // calculate positions for the animation steps
                // the result is an array of LatLng, stored in autoDriveSteps
                autoDriveSteps = new Array();
                var remainingSeconds = 0;
                var leg = response.routes[0].legs[0]; // supporting single route, single legs currently
                leg.steps.forEach(function(step) {
                    var stepSeconds = step.duration.value;
                    var nextStopSeconds = speedFactor - remainingSeconds;
                    while (nextStopSeconds <= stepSeconds) {
                        var nextStopLatLng = getPointBetween(step.start_location, step.end_location, nextStopSeconds / stepSeconds);
                        autoDriveSteps.push(nextStopLatLng);
                        nextStopSeconds += speedFactor;
                    }
                    remainingSeconds = stepSeconds + speedFactor - nextStopSeconds;
                });
                if (remainingSeconds > 0) {
                    autoDriveSteps.push(leg.end_location);
                }
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
}

// helper method to calculate a point between A and B at some ratio
function getPointBetween(a, b, ratio) {
    return new google.maps.LatLng(a.lat() + (b.lat() - a.lat()) * ratio, a.lng() + (b.lng() - a.lng()) * ratio);
}

// start the route simulation   
function startRouteAnimation(marker) {
    var autoDriveTimer = setInterval(function () {
            // stop the timer if the route is finished
            if (autoDriveSteps.length === 0) {
                clearInterval(autoDriveTimer);
            } else {
                // move marker to the next position (always the first in the array)
                marker.setPosition(autoDriveSteps[0]);
                // remove the processed position
                autoDriveSteps.shift();
            }
        },
        1000);
}

---

我编辑了标题以反映问题的内容@jyothi：当发布一个问题时，请花时间回顾一下它的内容。只需2分钟的额外复习，你就可以将质量提高100%，并期望得到更多更好的答案。k先生，谢谢你，你能回答我的问题吗question@jyothi你找到解决办法了吗？我需要在地图应用程序上做同样的事情。如果你实现了它，你能解释一下它是如何实现的吗？这个功能在谷歌地图V3中可用吗？DirectionsService返回的“步长”数组似乎只包含方向的步长（即在某某处左转），而不包括构成渲染线的各个点。@Puskvor是否可以不断增加latlong坐标来模拟路线，路线不必只在街道上。@dev_darin:是的。但并非所有路线都是直线；在不同的路线点之间，你的方法当然是可行的。@Puskvor你能告诉我它是如何增加的吗？我知道它是基于一个角度的，我也在考虑使用随机化器来获得值，但我想知道它是如何增加的incremented@dav_durin：获取一个坐标，按给定量递增，获取另一个，增加一些其他量，用新坐标创建一个新的LatLng，.setLatLng（yourNewLatLng）。该页面使用库的旧版本，其中包含一些方便的实用程序函数，您可以使用这些函数来查找路径上某个位置的lat-long。应该会使制作动画标记更容易。只是出于兴趣，我还在去年创建的一个网站上使用了类似的技术。这些方法可能与最新的API有点过时，但效果很好@Matt看起来域flushtracker.com现在重定向到domestos.com/uk/home.html。这是一个非常优雅的解决方案。谢谢

var autoDriveSteps = new Array();
var speedFactor = 10; // 10x faster animated drive

function setAnimatedRoute(origin, destination, map) {
    // init routing services
    var directionsService = new google.maps.DirectionsService;
    var directionsRenderer = new google.maps.DirectionsRenderer({
        map: map
    });

    //calculate route
    directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        },
        function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                // display the route
                directionsRenderer.setDirections(response);

                // calculate positions for the animation steps
                // the result is an array of LatLng, stored in autoDriveSteps
                autoDriveSteps = new Array();
                var remainingSeconds = 0;
                var leg = response.routes[0].legs[0]; // supporting single route, single legs currently
                leg.steps.forEach(function(step) {
                    var stepSeconds = step.duration.value;
                    var nextStopSeconds = speedFactor - remainingSeconds;
                    while (nextStopSeconds <= stepSeconds) {
                        var nextStopLatLng = getPointBetween(step.start_location, step.end_location, nextStopSeconds / stepSeconds);
                        autoDriveSteps.push(nextStopLatLng);
                        nextStopSeconds += speedFactor;
                    }
                    remainingSeconds = stepSeconds + speedFactor - nextStopSeconds;
                });
                if (remainingSeconds > 0) {
                    autoDriveSteps.push(leg.end_location);
                }
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
}

// helper method to calculate a point between A and B at some ratio
function getPointBetween(a, b, ratio) {
    return new google.maps.LatLng(a.lat() + (b.lat() - a.lat()) * ratio, a.lng() + (b.lng() - a.lng()) * ratio);
}

// start the route simulation   
function startRouteAnimation(marker) {
    var autoDriveTimer = setInterval(function () {
            // stop the timer if the route is finished
            if (autoDriveSteps.length === 0) {
                clearInterval(autoDriveTimer);
            } else {
                // move marker to the next position (always the first in the array)
                marker.setPosition(autoDriveSteps[0]);
                // remove the processed position
                autoDriveSteps.shift();
            }
        },
        1000);
}

setAnimatedRoute("source address or LatLng ...", "destination address or LatLng ...", map);
// start simulation on button click...
$("#simulateRouteButton").click(function() {
    startRouteAnimation(agentMarker);
});