使用Google地圖API移動多邊形標記v3

我正在使用Google Maps API V3。我正在試圖在Polyline上平滑地標記一個標記。使用Google地圖API移動多邊形標記v3

在這裏，我已經取得固定點爲（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);

有人可以幫我嗎？

來源

2014-01-24 Pravin Kumar

[關於折線動畫標記從方向服務（http://www.geocodezip.com/v3_animate_marker_directions.html），（[從XML折線動畫標記] http://www.geocodezip.com/v3_animate_marker_xml.html ） – geocodezip

請發表您的代碼中的問題，而不是一個的jsfiddle參考。 – geocodezip

我已經發布了我在JSFiddle上嘗試過的東西。 –

你的jsfiddle在新版macbook pro上最新版本的Safari上順利播放。 YMMV具有不同的硬件/平臺。

基本上，CSS動畫一般優於Javascript中實現的類似動畫。我認爲Google Maps API會在通過超時內部調用Marker＃setPosition（）時導致動畫失真。深入瞭解Google如何使用CSS動畫在內部實現google.maps.Marker#setAnimation方法，請參閱How to add custom animation on Google Map V3 Marker when I drop each marker one by one?的回答。

另一種選擇是停止使用谷歌的標記類型，並實施支持自定義CSS動畫自定義標記類型。這聽起來並不難。查看Mike Bostock發佈在using D3 for custom markers on Google Maps的博客文章。

來源

2014-01-24 14:44:47

Downvotes應加以解釋... –

使用Google地圖API移動多邊形標記v3

回答

相關問題