谷歌地图如何修复OVER_QUERY_LIMIT错误

时间:2016-04-26 19:25:46

标签: javascript google-maps google-maps-api-3

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

任何人都知道什么是问题?

1 个答案:

答案 0 :(得分:1)

  1. 您需要对要进行地理编码的地址进行功能关闭
  2. 您需要更改延迟,以便所有超时都不会同时到期。
  3. 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

    代码段

    &#13;
    &#13;
    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;
    &#13;
    &#13;