我正在构建一个网络应用程序,我正在尝试使用谷歌地图在地图上显示多个标记如果您运行我的代码,您将看到地图上显示的多个标记延迟3秒。
我想要达到的目标是让标记出现3秒然后(消失!!!)在下一个出现之前感谢您的帮助
这是我的代码\
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Map</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
//create a roadmap centered around specific coordinates
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(44.645636,-63.576679),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//creates the map with size and boundries as defined by element id
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Specify the bounds of the location
var southWest = new google.maps.LatLng(44.649391,-63.584747);
var northEast = new google.maps.LatLng(44.645636,-63.576679);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var i =0; // set your counter to 0
function myLoop(){ // create a loop function
setTimeout(function(){ // call a 3s setTimeout when the loop is called
//creates random location around area bounded by southwest & Northwest coordinates
var position = new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random())
var marker = new google.maps.Marker({
position: position,
map: map
});
i++;// increment the counter
if(i<6){myLoop();}// if the counter < 10, call the loop function
},3000)
}
myLoop();// start the loop
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map-canvas"style="width: 100%; height: 100%; position: absolute;"></div>
</body>
</html>