谷歌地圖JS api v3拖放標記一個接一個延遲

Question

我知道這個主題已經有幾個問題，例如Google maps api v3 drop markers animation with delay，但經過無數小時試圖跟隨，我已經跑到了死衚衕裏。

我在附近搜索用戶所在位置附近的公園，並且想每次只查找20個結果。如果我硬編碼數組中每個結果的位置，我已經得到了這個工作，但是當調用返回nearbySearch的函數時，我的setTimeout似乎不起作用。

這裏是我當前的代碼：

var map; 
var infowindow; 
var service; 

function initialize() { 

    // Create an array of styles. 
    var styles = [{ 
     stylers: [{ 
      hue: '#0091ff' 
     }, { 
      saturation: 5 
     }, { 
      "gamma": 0.5 
     }, { 
      "lightness": 30 
     }] 
    }]; 

    // Create a new StyledMapType object, passing it the array of styles, 
    // as well as the name to be displayed on the map type control. 
    var styledMap = new google.maps.StyledMapType(styles, { 
     name: 'Styled Map' 
    }); 

    // Try HTML5 geolocation 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude); 

      var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
       content: 'Found you :)' 
      }); 

      map = new google.maps.Map(document.getElementById('map-canvas'), { 
       center: pos, 
       zoom: 12, 
       mapTypeControl: false, 
       zoomControl: false, 
       streetViewControl: false 
      }); 

      var request = { 
       location: pos, 
       radius: 20000, 
       keyword: ['Dog parks'] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      service = new google.maps.places.PlacesService(map); 
      service.nearbySearch(request, callback); 
      service.getDetails(request, callback); 

      function callback(results, status) { 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
        for (var i = 0; i < results.length; i++) { 
         //setTimeout(function() { 
         createMarker(results[i]); 
         //}, i * 200); 
        } 
       } 
      } 

      function createMarker(place) { 
       var image = 'img/marker.png'; 
       var marker = new google.maps.Marker({ 
        map: map, 
        animation: google.maps.Animation.DROP, 
        icon: image, 
        position: place.geometry.location 
       }); 
       var request = { 
        reference: place.reference 
       }; 

       service.getDetails(request, function (details, status) { 
        google.maps.event.addListener(marker, 'click', function() { 

         if (status == google.maps.places.PlacesServiceStatus.OK) { 

          // Replace empty spaces in navigation link with + symbols 
          var navLink = details.formatted_address; 
          navLink = navLink.replace(/\s/g, "+"); 
          $('.navLink').html(navLink); 

          // Match Rating bar width to rating number 
          var ratingWidth = (details.rating * 20) + "px"; 
          $('.rating-bar > span').css('width', "'" + ratingWidth + "'"); 

          var contentStr = '<h5 class="info-window-title">' + details.name + '</h5><ul class="info-window">'; 
          if (!! details.rating) contentStr += '<li>Rating:&nbsp;<div class="rating-bar"><span style=width:' + ratingWidth + '></span></div><strong>' + details.rating + '</strong></li>'; 
          if (!! details.open_now) contentStr += '<li class="open-now">' + details.open_now + '</li>'; 
          contentStr += '<li>' + details.formatted_address + '</li>'; 
          contentStr += '<li class=gray>' + details.types + '</li>'; 
          // Check for platform to send appropriate app link 
          if ((navigator.platform.indexOf("iPhone") != -1)) { 
           contentStr += '<li class="link"><a class=navLink href=http://maps.apple.com/?daddr=Current+Location&saddr=' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>'; 
          } else { 
           contentStr += '<li class="link"><a class=navLink href=https://www.google.com/maps/dir/Current+Location/' + navLink + '><i class="fa fa-automobile"></i> Get Directions</a></li>'; 
          } 

          if (!! details.formatted_phone_number) contentStr += '<li class="link"><a href="tel:' + details.formatted_phone_number + '"><i class="fa fa-phone"></i> ' + details.formatted_phone_number + '</a></li>'; 
          contentStr += '</ul>'; 
          infowindow.setContent(contentStr); 
          infowindow.open(map, marker); 
         } else { 
          var contentStr = "<h5>No Result, status=" + status + "</h5>"; 
          infowindow.setContent(contentStr); 
          infowindow.open(map, marker); 
         } 
        }); 
       }); 
      } 

      //Associate the styled map with the MapTypeId and set it to display. 
      map.mapTypes.set('map_style', styledMap); 
      map.setMapTypeId('map_style'); 

      map.setCenter(pos); 
     }, function() { 
      handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 

} 
google.maps.event.addDomListener(window, 'load', initialize); 

錯誤： 「地方」 沒有定義。參考文獻：位置：place.geometry.location

Answer 1

你可以用setInterval做到這一點 - 見WindowTimers.setInterval()

var map; 
var infowindow = new google.maps.InfoWindow(); 

function initialize() { 

    var center = new google.maps.LatLng(59.32522, 18.07002); 

    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: center 
    }; 

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

    var request = { 
     location: center, 
     radius: '5000', 
     types: ["store", "bank"] 
    }; 

    service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request, callback); 
} 

function callback(results, status) { 

    if (status == google.maps.places.PlacesServiceStatus.OK) { 

     var i = 0; 
     var interval = setInterval(function() { 

      setMarker(results[i]); 
      i++; 

      if (i === results.length) clearInterval(interval); 

     }, 1000); 
    } 
} 

function setMarker(place) { 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
} 

initialize(); 

JSFiddle demo