谷歌地图超过查询限制

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>