我尝试在每个循环中使用setTimeout
:$("#dropdown option").each(function ()
但是有些原因不起作用,这里是mu代码:
function initialize() {
var map = new google.maps.Map(document.getElementById("map"));
var geocoder = new google.maps.Geocoder();
$("#dropdown").change(function () {
address = $("#dropdown :selected")[0].text;
geocodeAddress(address, geocoder, map);
});
var address = $("#dropdown :selected")[0].text;
$("#dropdown option").each(function ()
{
setTimeout(function () {
geocodeAddress($(this).text() + ' ,Montenegro', geocoder, map);
}, 1000);
});
geocodeAddress(address, geocoder, map);
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(address, geocoder, resultsMap) {
document.getElementById('info').innerHTML = address;
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
console.log(google.maps.GeocoderStatus)
}
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.fitBounds(results[0].geometry.viewport);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
这是小提琴:http://jsfiddle.net/E2TFh/13/
任何人都知道什么是问题?
答案 0 :(得分:1)
var timeout = 0;
$("#dropdown option").each(function ()
{
// update timeout, so don't all expire at the same time
timeout = timeout+1000;
// get function closure on the address for this entry
var address = $(this).text();
console.log(address);
setTimeout(function () {
geocodeAddress(address + ' ,Montenegro', geocoder, map);
}, timeout);
});
代码段
function initialize() {
var map = new google.maps.Map(document.getElementById("map"));
var geocoder = new google.maps.Geocoder();
$("#dropdown").change(function() {
address = $("#dropdown :selected")[0].text;
geocodeAddress(address, geocoder, map, true);
});
var address = $("#dropdown :selected")[0].text;
var timeout = 0;
$("#dropdown option").each(function() {
timeout = timeout + 1000;
var address = $(this).text();
console.log(address);
setTimeout(function() {
geocodeAddress(address + ' ,Montenegro', geocoder, map, false);
}, timeout);
});
geocodeAddress(address, geocoder, map, true);
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(address, geocoder, resultsMap, fitbounds) {
document.getElementById('info').innerHTML = address;
geocoder.geocode({
'address': address
}, function(results, status) {
console.log(results);
if (status === google.maps.GeocoderStatus.OK) {
if (fitbounds) resultsMap.fitBounds(results[0].geometry.viewport);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="dropdown">
<option value="1" selected>Montenegro</option>
<option value="2">Berane</option>
<option value="3">Podgorica</option>
<option value="4">Kolasin</option>
<option value="5">Kotor</option>
<option value="6">Bar</option>
<option value="7">Ulcinj</option>
<option value="8">Bijelo Polje</option>
<option value="9">Rozaje</option>
<option value="10">Mojkovac</option>
<option value="11">Niksic</option>
<option value="12">Danilovgrad</option>
<option value="13">Budva</option>
<option value="14">Sutomore</option>
<option value="15">Plav</option>
<option value="16">Gusinje</option>
<option value="17">Andrijevica</option>
<option value="18">Herceg Novi</option>
<option value="19">Tivat</option>
<option value="20">Zabljak</option>
</select>
<div id="info"></div>
<div class="map-container" style="width:100%;height: 500px">
<div id="map" style="width:100%;height: 500px"></div>
<!--the google map is loaded already-->
</div>
&#13;