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

我添加了设置间隔（），但标记仍然一次显示，我想让它一个接一个地延迟一段时间。

Answer 1

以下是使用window.setTimeout function的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);
}

这是一个快速demo。

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

2 个答案: