javascript - Google map 如何修复 OVER_QUERY_LIMIT 错误

Question

我尝试在每个循环中使用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);
        }
    });
}

这是 fiddle :http://jsfiddle.net/E2TFh/13/

有人知道问题出在哪里吗？

Answer 1

1. 您需要对要进行地理编码的地址进行函数闭包
2. 您需要更改延迟，以便所有超时不会同时到期。

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);
});

updated fiddle

代码片段:

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);
    }
  });
}

<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>