私は Web アプリを構築しており、Google マップを使用して地図上に複数のマーカーを表示しようとしています。コードを実行すると、地図上に複数のマーカーが 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>