var markers = new Array();
$(function () {
$.ajax({
url: "json.php",
data: {get: 'value'},
success: function(data){
$.each(data, function(i, item) {
markers.push([data[i].filename, data[i].date, data[i].lat, data[i].long]);
});
var myOptions = { disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, markers);
}
});
$("a.imglink").fancybox({
开发者_JAVA技巧'speedIn' : 600,
'speedOut' : 200
});
});
function setMarkers(map, markers) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var siteLatLng = new google.maps.LatLng(markers[i][2], markers[i][3]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: markers[i][1],
html: markers[i][0]
});
google.maps.event.addListener(marker, "click", function () {
$('.imglink').attr('href', 'img/' + this.html);
$('.imglink').click();
});
bounds.extend(siteLatLng);
map.fitBounds(bounds);
}
}
Works great, but all my markers drop at the same time. Is there any way to add a delay between each marker? Thanks!
Take a look at setInterval
. I think that could help you with your problem. That way you force the markers to drop one at a time. When all has dropped you can use clearInterval
to stop it.
Here is a tutorial
In case anyone comes across this question without finding the answer from google, here's a link to Google answering this question directly: https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration
精彩评论