如何在特定半径内使用Google Maps API v3查找和显示所有POI?

约翰尼·弗洛姆

我遇到的一个问题是(在我的情况下)示例代码中并未显示所有面包店,尽管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>
希姆

默认情况下,谷歌显示每个类别20个结果。如果要获得20个以上的结果,则需要访问所有结果,则可以使用回调函数pagination参数placesService

因此,您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地图分页示例

注意:这样做可能会导致地图上挤满了标记,从而损害了可用性。而不是立即显示所有标记,而是实现更多按钮功能,如Google Maps Pagination示例中所示。

编辑:您还可以使用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公式计算从搜索位置到地点的距离来手动处理半径,并手动丢弃不在半径范围内的地点。:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用API V3在每个页面上显示多个Google Maps

Google Maps API V3方法fitBounds()

关闭Google Maps API v3中的所有信息窗口

如何在Google Maps API v3中使用SVG标记

如何使用Google Maps API制作表单来搜索特定半径范围内的商品?

Google Maps API v3 Firefox问题

刷新Google Maps API V3图层

Google Maps API V3 fitBounds()无法正常工作

如何使用HTTPS调用HERE Maps API v3

Google Maps API v3不使用多边形突出显示国家边界

如何在Google Maps API v3中检测进入和退出streetView

使用Google Maps JavaScript API v3和Geocoding API映射多个位置

Google Maps API v3按州计算里程

Google Maps v3 API错误

如何从Google Maps API v3删除国际日期变更线(IDL)和赤道?

Google Maps API v3-并非所有标记都显示

使用Google Maps API v3显示路线列表

链接标题Google Maps API v3

Google Maps JavaScript API v3 /数据层/ MarkerClusterer

Google Maps API v3标记问题

Google Maps API v3返回灰色块

Esri功能服务和Google Maps API v3

如何使用Google Maps API V3显示多边形和多边形

使用Google Maps API v3相交多边形和折线

是否可以使用 Google Maps API 获取地址 [x] 英里半径内的所有企业?

响应式 Google Maps API v3 - 在小屏幕上自动显示所有标记

如果 Geocoder 返回 ZERO_RESULTS,则 Maps API v3 获取半径内最近的位置

带有信息窗口和图钉的 Google Maps API v3 多个标记

Google Maps JS API v3 - 如何检查和显示多边形点之间的距离