Question

我正在使用Google Maps API V3。我正在尝试平滑地在Polyline上设置标记。

这里我将固定点设为（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);

有人可以帮帮我吗？

Answer 1

在最新版本的Mac上，你的jsfiddle可以在最新版本的Mac上顺利播放。 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的标记类型，并实现支持自定义CSS动画的自定义标记类型。这并不像听起来那么难。查看Mike Bostock在using D3 for custom markers on Google Maps上发表的博客文章。

使用Google Maps api v3在PolyLine上移动标记

1 个答案: