2013-03-25 80 views
1

让我们开始与我不知道我在做什么。在此之前没有真正做过任何js。我试图让标记在它们之间稍微延迟下降。我已经完成了我的研究并尝试了几篇文章,但是我无法让它们工作。这里是我的代码:延迟标记降API V3

<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(52.365642,5.181599), 
      zoom: 13, 
      zoomControl: false, 
      scaleControl: false, 
      scrollwheel: false, 
      disableDoubleClickZoom: true, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 

      styles: [{"stylers":[{ "saturation": -29 },{ "visibility": "simplified" }]}, 
      {"elementType": "labels", "stylers": [{ "visibility": "off" }]}] 
     }; 

     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 

     setMarkers(map, locaties); 
     } 

     var locaties = [ 
     ['Bondi en zo', 52.365642, 5.181599], 
     ['Coogee en zo', 52.365642, 5.182599], 
     ['Cronulla en zo', 52.365642, 5.183599], 
     ['Manly en zo', 52.365642, 5.184599], 
     ['Maroubra en zo', 52.365642, 5.185599] 
     ]; 


     function drop() { 
     for (var i =0; i < locaties.length; i++) { 
      setTimeout(function() { 
      setMarkers(); 
      }, i * 200); 
     } 
     } 

     function setMarkers(map, locations) { 

     for (var i = 0; i < locations.length; i++) { 
      var klant = locations[i]; 
      var myLatLng = new google.maps.LatLng(klant[1], klant[2]); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       animation: google.maps.Animation.DROP 
      }); 
     } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html> 

ps的,是的,我已经改变了关键

回答

3

更改你的职责是这样,现在 下降函数创建一个间隔和下降的标志,你的setMarkers函数循环的位置,并呼吁降功能

 function drop(map, myLatLng) { 
      setTimeout(function() { 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       animation: google.maps.Animation.DROP 
      }); 
      }, i * 200); 
     } 

     function setMarkers(map, locations) { 
     for (var i = 0; i < locations.length; i++) { 
      var klant = locations[i]; 
      var myLatLng = new google.maps.LatLng(klant[1], klant[2]); 
      drop(map, myLatLng); 
     } 
     } 

PS:请不要刚从这里和那里复制粘贴代码,先了解他们正在试图解释和感谢改变密钥;)

+0

谢谢!我正在逐步学习试验和错误。马比有点雄心勃勃地开始与谷歌地图api。 – 2013-03-26 20:31:18

+0

它不是那么困难的兄弟。继续尝试 :) – 1Mayur 2013-03-27 06:23:01