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>