Google地圖：將ID數組放在10以上不起作用

Question

我創建了一個帶有多個標記的Google地圖。爲了管理，我根據地點ID創建了一個數組，以顯示不同興趣點的詳細信息。問題是從第十個數組的細節不再顯示。我使用免費的Google API。在getService的管理中偶然會有一定的限制嗎？我做錯什麼了嗎？下面是圖片和代碼！

var paris = [ 
    ['Le Palais de l'Élysée', 48.8704156, 2.3167538999999806, {placeId: 'ChIJR-OmjM5v5kcRIi9Yekb0OC4'}], 
    ['Rue du Faubourg Saint-Honoré', 48.8729217, 2.3104977000000417, {placeId: 'ChIJ9UXDFMZv5kcRJM1tqvbRfjY'}], 
    ['Champs Élysées', 48.8657844, 2.307314099999985, {placeId: 'ChIJMXZjGMVv5kcRmVlGwtKSa3w'}], 
    ['Arc de triomphe', 48.8737793, 2.2950155999999424, {placeId: 'ChIJazhtdOxv5kcRqV9clsepEIc'}], 
    ['Musée du Louvre', 48.8606111, 2.3376439999999548, {placeId: 'ChIJD3uTd9hx5kcR1IQvGfr8dbk'}], 
    ['Grand Palais', 48.86610909999999, 2.3124543999999787, {placeId: 'ChIJ0dzuSNBv5kcRa6BHUVdFm0k'}], 
    ['Place de la Concorde', 48.8656331, 2.3212356999999884, {placeId: 'ChIJAQquYc1v5kcRLKslDuENAxg'}], 
    ['L'eglise de la Madeleine', 48.8700435, 2.324550199999976, {placeId: 'ChIJ7xwB9TJu5kcRtsJIlPxT918'}], 
    ['Grande Roue de Paris', 48.8651962, 2.3220541000000594, {placeId: 'ChIJCfZJWc1v5kcRg_05SQL-RNg'}], 
    ['8e arrondissement', 48.87187219999999, 2.3176432000000204, {placeId: 'ChIJdWkEFsZv5kcRwBqUaMOCCwU'}], 
    ['Gare Saint-Lazare', 48.8763827, 2.325446800000009, {placeId: 'ChIJgwCdnTVu5kcRADA9YHBZa1s'}], 
    ['Jardin des Tuileries', 48.8634916, 2.327494300000012, {placeId: 'ChIJAQAAMCxu5kcRx--_4QnbGcI'}], 
    ['Hotel Splendide Royal Paris', 48.87096269999999, 2.315414099999998] 
]; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: {lat: paris[0][1], lng: paris[0][2]} 
    }); 

    setMarkers(map); 
    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 


    for(var i=0; i < 12; i++){ 
    service.getDetails(paris[i][3], function(place, status) { 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent("<strong>" + place.name + "</strong>" + 
      "<br />" + place.formatted_address + 
      "<br />" + "<a target='_blank' href='"+ place.website + "'>" + place.website +"</a>" + 
      "<br />" + "Tel: " + place.international_phone_number 
     ); 
      infowindow.open(map, this); 
     }); 
     } 
    }); 
    } 
} 

function setMarkers(map) { 
    for (var i = 0; i < paris.length; i++) { 
    var strut = paris[i]; 
    var marker = new google.maps.Marker({ 
     position: {lat: strut[1], lng: strut[2]}, 
     map: map, 
     title: strut[0] 
    }); 
    } 
} 

Answer 1

對JavaScript的API服務的配額爲應對人類交互優化。 建議不要使用客戶端服務進行批量查詢。

當API加載時，最多可以提前發送10個請求，但是之後會有一個速率限制，當存在人類輸入地址時會有足夠的速率限制，但是當代碼嘗試越來越多地理編碼時地址。

爲了一次獲得10個以上的結果，您需要在加載地圖之前使用Geocoding API Web服務，以批量對所有結果進行地理編碼。如果您的地圖將顯示這些結果給許多用戶，這尤其合適。

或者，您可以對結果進行分頁（每頁10個）並強制頁面之間的延遲，或爲每個頁面重新加載API。這兩種方法都有其缺點：延遲對用戶來說很煩人，重新加載API速度較慢，並且會更快地使用Google Maps JavaScript API配額。也就是說，如果您確實希望用戶經常超出第一頁。

也許你可以用一個很好的動畫加載前10個，然後等待10秒，從這個時刻開始以0.8 QPS（查詢每秒）左右的速度加油，幷包含一些動畫，以避免讓用戶感到無聊： ）

Answer 2

最有可能發生這種情況，因爲您正在爲其餘兩個請求獲取OVER_QUERY_LIMIT狀態碼。

根據Status Codes

OVER_QUERY_LIMIT表示您超過配額。

根據Usage limits

的谷歌的地方搜索服務共享相同的使用限制。 但是，文本搜索服務需要10倍的乘數。 也就是說，每個文本搜索請求你做會有損您的配額

爲了繞過這個限制，你可以考慮以下解決方案10個 請求：一旦收到OVER_QUERY_LIMIT狀態，等待一定的延遲然後再次執行請求，在這種情況下，可以請求所有地點。

例

var paris = [ 
 
    ['Le Palais de l'Élysée', 48.8704156, 2.3167538999999806, { placeId: 'ChIJR-OmjM5v5kcRIi9Yekb0OC4' }], 
 
    ['Rue du Faubourg Saint-Honoré', 48.8729217, 2.3104977000000417, { placeId: 'ChIJ9UXDFMZv5kcRJM1tqvbRfjY' }], 
 
    ['Champs Élysées', 48.8657844, 2.307314099999985, { placeId: 'ChIJMXZjGMVv5kcRmVlGwtKSa3w' }], 
 
    ['Arc de triomphe', 48.8737793, 2.2950155999999424, { placeId: 'ChIJazhtdOxv5kcRqV9clsepEIc' }], 
 
    ['Musée du Louvre', 48.8606111, 2.3376439999999548, { placeId: 'ChIJD3uTd9hx5kcR1IQvGfr8dbk' }], 
 
    ['Grand Palais', 48.86610909999999, 2.3124543999999787, { placeId: 'ChIJ0dzuSNBv5kcRa6BHUVdFm0k' }], 
 
    ['Place de la Concorde', 48.8656331, 2.3212356999999884, { placeId: 'ChIJAQquYc1v5kcRLKslDuENAxg' }], 
 
    ['L'eglise de la Madeleine', 48.8700435, 2.324550199999976, { placeId: 'ChIJ7xwB9TJu5kcRtsJIlPxT918' }], 
 
    ['Grande Roue de Paris', 48.8651962, 2.3220541000000594, { placeId: 'ChIJCfZJWc1v5kcRg_05SQL-RNg' }], 
 
    ['8e arrondissement', 48.87187219999999, 2.3176432000000204, { placeId: 'ChIJdWkEFsZv5kcRwBqUaMOCCwU' }], 
 
    ['Gare Saint-Lazare', 48.8763827, 2.325446800000009, { placeId: 'ChIJgwCdnTVu5kcRADA9YHBZa1s' }], 
 
    ['Jardin des Tuileries', 48.8634916, 2.327494300000012, { placeId: 'ChIJAQAAMCxu5kcRx--_4QnbGcI' }], 
 
    //['Hotel Splendide Royal Paris', 48.87096269999999, 2.315414099999998] 
 
]; 
 

 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 15, 
 
    center: {lat: paris[0][1], lng: paris[0][2]} 
 
    }); 
 

 
    //setMarkers(map); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    displayPlaces(map,service,infowindow,paris); 
 
} 
 

 

 
function displayPlaces(map,service,infowindow,data,currentIndex){ 
 
    
 
    currentIndex = currentIndex || 0; 
 
    if(currentIndex >= data.length) 
 
     return; 
 

 
    service.getDetails(data[currentIndex][3], function(place, status) { 
 
     
 
     if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) { 
 
      console.log(status + currentIndex); 
 
      setTimeout(function() { 
 
       displayPlaces(map,service,infowindow,data,currentIndex); 
 
      }, 200); 
 
     }  
 
     else if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: place.geometry.location 
 
     }); 
 
     google.maps.event.addListener(marker, 'click', function() { 
 
      infowindow.setContent("<strong>" + place.name + "</strong>" + 
 
      "<br />" + place.formatted_address + 
 
      "<br />" + "<a target='_blank' href='"+ place.website + "'>" + place.website +"</a>" + 
 
      "<br />" + "Tel: " + place.international_phone_number 
 
     ); 
 
      infowindow.open(map, this); 
 
     }); 
 

 
     currentIndex++; 
 
     displayPlaces(map,service,infowindow,data,currentIndex); 
 

 
     } 
 
    }); 
 
} 
 

 

 

 
google.maps.event.addDomListener(window, 'load', initMap); 

#map, 
 
     html, 
 
     body { 
 
      padding: 0; 
 
      margin: 0; 
 
      height: 100%; 
 
     }

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map"></div>