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

【问题标题】：Google Places JS API: autocomplete search with setInterval on markersGoogle Places JS API：在标记上使用 setInterval 自动完成搜索
【发布时间】：2015-04-24 18:15:22
【问题描述】：

我已经成功实现了一些从地点搜索框返回结果的代码，但我想使用 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);

【问题讨论】：

运行这段代码会发生什么？你能把一个 jsFiddle 和一个完整的例子放在一起吗（例如一个地方 [] 被定义的地方？）

标签： google-maps-api-3 google-places-api

【解决方案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>

【讨论】：