Google Places JS API: 在标记上使用 setInterval 自动完成搜索

Question

我已经成功实现了一些从 地点搜索框 返回结果的代码，但我想使用 setInterval 所以有在地图上放置标记之间有一些延迟。我在尝试时遇到了一些麻烦。非常感谢任何帮助，因为我对我认为是一项简单的任务感到非常沮丧！ :)

此代码有效，没有 setInterval 延迟：

for (var i = 0, place; place = places[i]; i++) {
        
    var image = {
        url: 'img/marker.png',
        size: new google.maps.Size(48, 48),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(24, 48),
        scaledSize: new google.maps.Size(50, 50)
    };

    // Create a marker for each place.
    var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        position: place.geometry.location
    });

    var request = { reference: place.reference };
    markers.push(marker); //Push to Markers array.
    bounds.extend(place.geometry.location);

}

我对 setInterval 的尝试无效：

var i = 0;
var place;
place = places[i];
var interval = setInterval(function () {

    var image = {
        url: 'img/marker.png',
        size: new google.maps.Size(48, 48),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(24, 48),
        scaledSize: new google.maps.Size(50, 50)
    };

    // Create a marker for each place.
    var marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        position: place.geometry.location
    });
  
    i++;

    var request = { reference: place.reference };
    markers.push(marker); //Push to Markers array.
    bounds.extend(place.geometry.location);

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

}, 500);

Answer 1

setInterval 不是正确的方法，您必须使用 setTimeout（setInterval 一次又一次地运行该函数，而 setTimeout 运行函数一次....对于每个标记)
要达到预期效果，您必须增加延迟（例如使用 i*500）

示例：

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(52.520006, 13.404953),
      zoom: 22
    }),
    service = new google.maps.places.PlacesService(map),
    markers = [],
    bounds = new google.maps.LatLngBounds(map.getCenter());




  service.radarSearch({
    types: ['restaurant'],
    location: map.getCenter(),
    radius: 5000
  }, function(places, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var image = {
        url: 'http://maps.gstatic.com/mapfiles/markers2/dd-via.png'
      };
      for (var i = 0, place; place = places[i]; i++) {

        setTimeout((function(place) {
          return function() {
            bounds.extend(place.geometry.location);
            map.fitBounds(bounds);

            var marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              icon: image,
              position: place.geometry.location
            });
            markers.push(marker);
          }
        })(place), 250 * i)

      }

    }
  });
}

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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
<div id="map-canvas"></div>

Google Places JS API: 在标记上使用 setInterval 自动完成搜索

Google Places JS API: autocomplete search with setInterval on markers

google-maps-api-3

google-places-api