Перемещение маркера на PolyLine с помощью Google Maps api v3

Question

Я пользуюсь 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); 

Может ли кто-нибудь помочь мне?

Answer 1

Ваш jsfiddle играет гладко для меня в последней версии Safari на новом MacBook Pro. YMMV с различными аппаратными средствами/платформами.

В основном, анимации CSS обычно превосходят аналогичные анимации, реализованные в Javascript. Я думаю, что API Карт Google будет вызывать анимационные артефакты при вызове Marker # setPosition() с помощью тайм-аута. См. Этот ответ для How to add custom animation on Google Map V3 Marker when I drop each marker one by one? для глубокого погружения в хакерство, когда Google внутренне реализует метод google.maps.Marker#setAnimation с использованием анимации CSS.

Другой вариант - прекратить использование типа маркера Google и реализовать специальный тип маркера, который поддерживает пользовательскую анимацию CSS. Это не так сложно, как кажется. Отметьте сообщение в блоге Майком Бостоком на странице using D3 for custom markers on Google Maps.