如何使用Google Maps API v3 查找并显示一定半径内的所有POI？

Question

我面临的问题是（在我的例子中）并不是所有的面包店都显示在示例代码中，尽管 Google 肯定知道它们，因为我在其他搜索中找到它们。

例如，位于 52.543770、13.441250 的两家面包店虽然在指定半径内，但未显示。为什么会这样以及如何解决？我想找到 Google 知道的所有面包店，而不仅仅是其中的一部分。

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script>
var map;
var infowindow;

function initMap() {
  var berlin = {lat: 52.540, lng: 13.430};

  map = new google.maps.Map(document.getElementById('map'), {
    center: berlin,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: berlin,
    radius: 2000,
    types: ['bakery']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

    </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&libraries=places&callback=initMap" async defer></script>
  </body>
</html>

Answer 1

默认情况下 google 每个类别显示 20 个结果。如果您想要超过 20 个结果，即您需要访问所有结果，您可以使用 placesService 回调函数的 pagination 参数。

所以你的callback将被修改为：

function callback(results, status, pagination) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
    if (pagination.hasNextPage)
        pagination.nextPage();
  }
}

这将立即显示所有结果。

pagination.nextPage(); 将使用新的结果集再次调用 callback 函数。

可以参考Google Maps Pagination example

注意：这样做可能会导致您的地图上挤满了标记，从而影响可用性。不要一次显示所有标记，而是实现 More 按钮功能，如 Google 地图分页示例中所示。

编辑： 您也可以在请求对象中使用 rankBy: google.maps.places.RankBy.DISTANCE 属性来首先获得最近的结果。

Edit2: 同时通过删除 radius 属性并添加 rankBy 属性来修改您的请求对象：

service.nearbySearch({
    location: berlin,
    types: ['bakery'],
    rankBy: google.maps.places.RankBy.DISTANCE
}, callback);

这将显示您的 Lila Backer 面包店结果。这些地点在 bakery

下正确列出

请注意，由于半径已被删除，您可能会得到比预期更多的结果。您仍然可以通过使用 Haversine formula 计算从搜索位置到地点的距离来手动处理半径，并手动丢弃落在半径之外的地点。 :)

如何使用Google Maps API v3 查找并显示一定半径内的所有POI？

How to find and show all POIs with Google Maps API v3 within a certain radius?

google-maps

google-maps-api-3

google-maps-markers

google-places-api