Question

我已经成功实现了一些用于从地方搜索框返回结果的代码，但我想使用 setInterval ，因此在删除标记之间存在一些延迟地图。我在尝试时遇到了一些麻烦。我非常感激任何帮助，因为我对我认为简单的任务感到非常沮丧！：）

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

＆＃13;

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);

}

＆＃13;

我尝试setInterval，但不起作用：

＆＃13;

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);

＆＃13;

Answer 1

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

示例：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: