Google 地图：放置超过 10 的 ID 数组不起作用

Question

我创建了一个带有多个标记的 Google 地图。为了管理，我根据地点 ID 创建了一个数组，以显示不同兴趣点的详细信息。问题是从第十个数组开始不再显示详细信息。我用免费的GoogleAPI。是不是碰巧在getService的管理上有一定的限制？我做错什么了吗？下面是图片和代码！

var paris = [
  ['Le Palais de l&apos;É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&apos;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 个以上的结果，您需要在加载地图之前使用地理编码 API 网络服务，对所有结果进行批量地理编码。如果您的地图将向许多用户显示这些结果，这尤其合适。

或者，您可以对结果进行分页（每页 10 个）并在页面之间强制延迟，或者为每个页面重新加载 API。这两种方法都有其缺点：延迟对用户来说很烦人，重新加载 API 速度较慢并且会更快地消耗您的地图 JavaScript API 配额。也就是说，如果您确实希望用户经常浏览第一页。

也许你可以用漂亮的动画加载前 10 个，然后等待 10 秒，从这一刻开始以 0.8 QPS（每秒查询数）左右的速度节流，并包含一些动画，以免让用户感到无聊:)

Answer 2

最有可能发生这种情况，因为您正在获取剩余两个请求的 OVER_QUERY_LIMIT 状态代码。

根据Status Codes

OVER_QUERY_LIMIT indicates that you are over your quota.

根据Usage limits

The Google Places search services share the same usage limits. However, the Text Search service is subject to a 10-times multiplier. That is, each Text Search request that you make will count as 10 requests against your quota

为了绕过这个限制，你可以考虑以下解决方案：一旦收到OVER_QUERY_LIMIT状态，等待一定的延迟，然后再次请求，这样就可以请求所有的地方。

示例

var paris = [
  ['Le Palais de l&apos;É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&apos;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>

Google 地图：放置超过 10 的 ID 数组不起作用

Google Maps: place ID array over 10 doesn't work

javascript

arrays

google-maps

google-maps-api-3

google-places-api