如何指定谷歌地图标记的延迟

Question

我正在根据数组值在谷歌地图上放置一个标记，地图上将显示多个图钉标记。 我想为地图上显示的每个标记指定延迟时间。 我怎样才能做到这一点？

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 5,
  center: new google.maps.LatLng(21.9200,77.9000),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();  
var image = 'images/pushpins/set1.png';    
var marker, i;


google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

function placeMarkers(){
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    window.setInterval(5000);
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image
  });
}

我在这里放置标记，使用具有设置间隔的循环，但它不起作用。

function placeMarkers(){
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    window.setInterval(5000);
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image
  });

我已经添加了 set interval()，但标记仍然一次出现，我希望它一个接一个地出现，并有一个延迟时间。

Answer 1

这是使用window.setTimeout 函数的placeMarkers函数的更正版本：

function placeMarkers(map, positions, timeout) {
    for (var i = 0; i < positions.length; i++) {
        (function(i) {
            window.setTimeout(function() {
                markers.push(new google.maps.Marker({
                    position: positions[i],
                    map: map
                }));
            }, timeout*i);
        })(i);
    }
}

完整示例

 var berlin = new google.maps.LatLng(52.520816, 13.410186); var neighborhoods = [ new google.maps.LatLng(52.511467, 13.447179), new google.maps.LatLng(52.549061, 13.422975), new google.maps.LatLng(52.497622, 13.396110), new google.maps.LatLng(52.517683, 13.394393) ]; var markers = []; var map; function initialize() { var mapOptions = { zoom: 12, center: berlin }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } function drop() { clearMarkers(); placeMarkers(map,neighborhoods,400); } function placeMarkers(map, positions, timeout) { for (var i = 0; i < positions.length; i++) { (function(i) { window.setTimeout(function() { markers.push(new google.maps.Marker({ position: positions[i], map: map })); }, timeout*i); })(i); } } function clearMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } google.maps.event.addDomListener(window, 'load', initialize);

 html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; }

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <div id="panel" style="margin-left: -52px"> <button id="drop" onclick="drop()">Drop Markers</button> </div> <div id="map-canvas"></div>

Answer 2

你应该尝试超时这是它的工作原理

for (var i = 0; i < locations.length; i++) {
    addMarkerWithTimeout(locations[i], i * 200);
  }

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}

这是一个快速演示。