[英]How to specify the delay for the google map marker
I'm placing a marker on google map from the array values and multiple push pin markers will be shown on the map.我正在根据数组值在谷歌地图上放置一个标记,地图上将显示多个图钉标记。 I want to specify the delay time for each marker shown on the map.
我想为地图上显示的每个标记指定延迟时间。 How can I do that?
我怎样才能做到这一点?
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
});
}
Here i am placing the marker, using loop with set interval, but its not working.我在这里放置标记,使用具有设置间隔的循环,但它不起作用。
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
});
I have added the set interval(), but still the markers appear all at a time, i want it to come one after the other with a delay time.我已经添加了 set interval(),但标记仍然一次出现,我希望它一个接一个地出现,并有一个延迟时间。
Here is a corrected version of placeMarkers
function that utilizes window.setTimeout function :这是使用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);
}
}
Complete example完整示例
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>
you should try timeout here's how it's works你应该尝试超时这是它的工作原理
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.