谷歌地圖超過查詢限制

Question

我知道類似的問題已發佈，但我沒有找到並在任何一個答案，因爲它涉及到我的特定問題。

我有一個JavaScript使用谷歌地圖將客戶郵編放在地圖上。我遇到的問題與其他人已發佈的問題類似 - 我收到「超出查詢限制」錯誤。

我嘗試了不同的設置，使用setTimeOut嘗試在允許的時間間隔內發送Google數據，但我無法使其工作。

這裏是我的行動：

 function initialize() 
     { 
      var rowNum  = 0 ; 
      var rowColor = "" ; 

      var latlng  = new google.maps.LatLng(27.91425, -82.842617);    

      var myOptions = 
      { 
       zoom: 7, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map    = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

      geocoder  = new google.maps.Geocoder(); 

      data.forEach(function(mapData,idx) 
      {  
       window.setTimeout(function() 
       { 
        geocoder.geocode({ 'address': mapData.address}, function(results, status) 
        {     
         if (status == google.maps.GeocoderStatus.OK) 
         { 
          var marker = new google.maps.Marker({ 
          map: map, 
          position: results[0].geometry.location, 
          title: mapData.title, 
          icon: getIcon(mapData.type) 
         }); 

         var contentHtml = "<div style='width:250px;height:90px'><strong>"+mapData.title+"</strong><br />"+mapData.address+"</div>"; 

         var infowindow = new google.maps.InfoWindow({ 
          content: contentHtml 
         }); 

         google.maps.event.addListener(marker, 'click', function() 
         { 
          infowindow.open(map,marker); 
         }); 

         marker.locid = idx+1; 
         marker.infowindow = infowindow; 
         markers[markers.length] = marker; 

         if (idx%2 == 0) 
         { 
          rowColor = 'style="background-color:#00FFFF;"' ; 
         } 
         else 
         { 
          rowColor = 'style="background-color:#FFFFFF;"' ; 
         } 

         var sideHtml = '<div ' + rowColor + ' class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>'; 
          sideHtml += mapData.address + '</div>'; 
          $("#locs").append(sideHtml); 

         //Are we all done? Not 100% sure of this 
         if(markers.length == data.length) doFilter(); 
        } 
        else 
        { 
         // alert("Geocode was not successful for the following reason: " + status); 
        } 
       }, 3000);     
      });        
     }); 

當我使用這個動作運行我的網頁，我回來11個標記，即使我有比更多的在我的JSON字符串。 window.setTimeout絕對沒有影響 - 我顯然在這裏做錯了。

我希望在這個問題上的任何幫助。

謝謝，

Answer 1

我找到了我的問題的答案。我在Web上找到了下面的代碼，並將其修改爲我的需要。

有了它，您可以加載許多標記而不會超過Google的查詢限制。

我用超過100個標記測試過它，它工作得很漂亮。該頁面根本不會凍結。

我相信你們中的一些人可以做得更加優雅高效，但這是一個很好的起點。

<script type="text/javascript"> 
    //<![CDATA[  

// display ani gif 
    loadingGMap() ; 

// delay between geocode requests - at the time of writing, 100 miliseconds seems to work well 
     var delay = 100; 

    // ====== Create map objects ====== 
     var infowindow = new google.maps.InfoWindow(); 
    var latlng = new google.maps.LatLng(27.989551,-82.462235); 

    var mapOptions = 
    { 
     zoom: 7, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var geo   = new google.maps.Geocoder(); 
    var map  = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var bounds = new google.maps.LatLngBounds(); 

    // ====== Geocoding ====== 
    function getAddress(search, next) 
    { 
     geo.geocode({address:search}, function (results,status) 
     { 
      // If that was successful 
      if (status == google.maps.GeocoderStatus.OK) 
      { 
       // Lets assume that the first marker is the one we want 
       var p = results[0].geometry.location; 
       var lat = p.lat(); 
       var lng = p.lng(); 

       // Output the data 
       var msg = 'address="' + search + '" lat=' +lat+ ' lng=' +lng+ '(delay='+delay+'ms)<br>'; 
       //document.getElementById("messages").innerHTML += msg; 
       // Create a marker 

       createMarker(search,lat,lng); 
      } 
      // ====== Decode the error status ====== 
      else 
      { 
       // === if we were sending the requests to fast, try this one again and increase the delay 
       if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) 
       { 
        nextAddress--; 
        delay++; 
       } 
       else 
       { 
        var reason = "Code "+status; 
        var msg  = 'address="' + search + '" error=' +reason+ '(delay='+delay+'ms)<br>'; 
        // document.getElementById("messages").innerHTML += msg; 
       } 
      } 
      next(); 
     } 
    ); 
} 

// ======= Function to create a marker 
function createMarker(add,lat,lng) 
{ 
    var contentString = add; 

    if (add=='EOF') 
    { 
     stopLoadingGMap() ; 
    } 

    var addArray  = add.split(' ');  
    var zipcode   = addArray.pop(); 
    var zipcode   = add.match(/\d{5}/)[0] ;  

    var image   = 'icons/sm_02.png';   
    var marker   = new MarkerWithLabel(
    { 
      position: new google.maps.LatLng(lat,lng), 
     map: map, 
     icon: image, 
     labelContent: zipcode, 
     labelAnchor: new google.maps.Point(50, 0), 
     labelClass: "labels", // the CSS class for the label 
     labelStyle: {opacity: 0.75},   
     zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

    google.maps.event.addListener(marker, 'click', function() 
    { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
    }); 

    bounds.extend(marker.position); 
} 

// ======= An array of locations that we want to Geocode ======== 
// use static or build dynamically 
// use as many markers as you need – I’ve test with over 100 
var addresses = var data = [ 
{‘StreetAddress1 City State Zipcode’}, 
    {‘StreetAddress2 City State Zipcode’}, 
    {‘StreetAddress3 City State Zipcode’}, 
    {‘StreetAddress14 City State Zipcode’}, 
… 
    {‘EOF’}, 
    ]; 

// ======= Global variable to remind us what to do next 
var nextAddress = 0; 

// ======= Function to call the next Geocode operation when the reply comes back 
function theNext() 
{ 
    if (nextAddress < addresses.length) 
    { 
     setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay); 
     nextAddress++; 
     } 
    else 
    { 
     // We're done. Show map bounds 
     map.fitBounds(bounds); 
      } 
} 

// ======= Call that function for the first time ======= 
theNext(); 

// This Javascript is based on code provided by the 
// Community Church Javascript Team 
// http://www.bisphamchurch.org.uk/ 
// http://econym.org.uk/gmap/ 

    //]]> 
    </script>