2013-04-30 23 views
0

我已經寫了下面的代碼來顯示谷歌地圖中的多個標記,我成功了它。現在我想要一個拖放動畫應用於標記,並希望在特定時間間隔後放置標記。我知道我想打電話給setTimeout方法,但不知道在哪裏調用此方法達到的效果如何在特定的時間間隔之後逐個放置標記聚類?

<script type="text/javascript"> 
    window.onload=function(){ 
     if(markers.length>0){     
      var mapOptions={     
       center:new google.maps.LatLng(markers[0].lat,markers[0].lng),     
       mapTypeId:google.maps.MapTypeId.ROADMAP   
      }; 
      var infoWindow=new google.maps.InfoWindow(); 
      var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions); 
      var bounds=new google.maps.LatLngBounds(); 
      for(i=0;i<markers.length;i++){ 

       var imageIcon=i+1;    
       var data=markers[i]; 
       var latlng=new google.maps.LatLng(data.lat,data.lng); 

       var marker=new google.maps.Marker({      
          position:latlng, 
          map:map, 
          title:data.title, 
          icon:"Icon/marker"+imageIcon+".PNG", 
          animation:google.maps.Animation.DROP          
       });     

       bounds.extend(marker.getPosition()); 
       (function(marker,data){ 
        google.maps.event.addListener(marker,"click",function(e){ 
         infoWindow.setContent(data.description); 
         infoWindow.open(map,marker); 
         if(marker.getAnimation()!=null){ 
          marker.setAnimation(null); 
         }else{ 
          marker.setAnimation(google.maps.Animation.BOUNCE); 
         } 
        });     
       })(marker,data);        
      } //for loop ends here 
      map.fitBounds(bounds); 
      map.setCenter(bounds.getCenter());    

     }//if condition check for marker.length ends here 
    } //windows.load function ends here  
</script> 
+0

你能否粘貼你的整個代碼,包括html ..? – 2013-04-30 11:34:24

+0

我們並不真的需要這裏的HTML。這個問題很清楚。看到我的答案。 – MrUpsidown 2013-05-01 13:10:11

回答

0

你可以做到這一點使用的setInterval。我不認爲setTimeout會在這裏工作。看我的例子:http://jsfiddle.net/upsidown/PWsVH/

var i = 0; 

var interval = setInterval(function() { 

    var marker = new google.maps.Marker({ 
     ... 
    }); 

    i++; 

    if(i >= coords.length) clearInterval(interval); 

}, 1000); 
+0

謝謝你的回覆。我正確地得到了拖放動畫。我已經寫了'map.fitBounds(bounds)'和'map.setCenter(bounds.getCenter())'來顯示所有沒有縮小的標記。問題在'setInterval'函數映射沒有被顯示之後被稱爲上述函數。 – Kannan 2013-05-02 06:29:32

+0

你想做什麼?您是否期望地圖在每個標記被丟棄後進行調整?還是在動畫之前?後?請澄清。 – MrUpsidown 2013-05-02 08:45:06

+0

理想情況下,我想要的是地圖調整所有的標記intially,然後有一陣雨的標記。如果它很難實現,我會希望你建議的方式,即每個標記被丟棄後調整的地圖。 – Kannan 2013-05-02 08:58:49

相關問題