javascript - 谷歌地图 : place ID array over 10 doesn't work

Question

我创建了一个带有多个标记的 Google map 。为了便于管理，我根据地点 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 个以上的结果，您需要在加载 map 之前使用 Geocoding API Web 服务，对所有结果进行批量地理编码。如果您的 map 将向许多用户显示这些结果，那么这尤其合适。

或者，您可以对结果进行分页(每页 10 个)，并强制页面之间存在延迟，或者为每个页面重新加载 API。这两种方法都有其缺点:延迟会让用户感到烦恼，重新加载 API 的速度较慢，并且更快地消耗 Maps JavaScript API 配额。也就是说，如果您确实希望用户经常超出第一页。

也许您可以只加载前 10 个动画，然后等待 10 秒，从此时起将 QPS(每秒查询数)控制在 0.8 左右，并包含一些动画以免让用户感到无聊:)