使用 Google Maps api v3 在折线上移动标记答案

【问题标题】：Moving Marker on a PolyLine using Google Maps api v3使用 Google Maps api v3 在折线上移动标记
【发布时间】：2014-02-14 22:29:21
【问题描述】：

我正在使用 Google Maps API V3。我正在尝试平滑地为折线上的标记设置动画。

我试过这个http://jsfiddle.net/bmSbU/154/

这里我将固定点设为 (30,-110) 和 (30,-100)，因此我可以根据固定点进行制作。

现在我的问题是当我有多个点 (PolyLine) 时如何做同样的事情，并且标记应该平滑移动而不会在地图上滑动。

var map;
var path;
var marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    route = new google.maps.Polyline({
        path: [
        new google.maps.LatLng(30, -110),
        new google.maps.LatLng(30, -100)],
        map: map
    });

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(30, -110),
        map: map
    });

    counter = 0;
    interval = window.setInterval(function () {
        counter++;
        var pos = new google.maps.LatLng(30, -110 + counter / 100);
        marker.setPosition(pos);
        if (counter >= 1000) {
            window.clearInterval(interval);
        }
    }, 10);
}

google.maps.event.addDomListener(window, 'load', initialize);

谁能帮帮我？

【问题讨论】：

animated markers on polyline from directions service, animated marker on polyline from xml
请在问题中发布您的代码，而不是对 jsfiddle 的引用。
我已经发布了我在 JSFiddle 上尝试过的内容..
请参阅另一个问题中显示的示例：[沿折线移动标记][1] [1]：stackoverflow.com/questions/29639324/…

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

你的 jsfiddle 在最新版本的 Safari 上对我来说很流畅，在较新的 macbook pro 上。具有不同硬件/平台的 YMMV。

从根本上说，CSS 动画通常优于用 Javascript 实现的类似动画。我认为当您通过超时内部调用 Marker#setPosition() 时，Google Maps API 会导致动画伪影。请参阅How to add custom animation on Google Map V3 Marker when I drop each marker one by one? 的答案，深入了解 Google 如何在内部使用 CSS 动画实现 google.maps.Marker#setAnimation 方法。

另一种选择是停止使用 Google 的 Marker 类型，并实现支持自定义 CSS 动画的自定义标记类型。这并不像听起来那么难。查看 Mike Bostock 在using D3 for custom markers on Google Maps 上的博客文章。

【讨论】：