如何在特定半径内使用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条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Esri功能服务和Google Maps API v3

来自分类Dev

带有Rhomobile的Google Maps Javascript V3 API

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类常见问题

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

来自分类Dev

Google Maps API v3:为什么Google Maps API V3和Google Maps的搜索结果不一致?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

在Google Maps API v3中是否可以按半径搜索半径?

来自分类Dev

使用MVC模型在Google Maps API v3上显示标记

来自分类Dev

显示/隐藏标记并使用信息窗口Google Maps API v3

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何使用HTTPS调用HERE Maps API v3

来自分类Dev

查找最接近我的地理位置的标记Google Maps API V3

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

Google Maps API V3错误:RefererDeniedMapError

来自分类Dev

使地图在Google Maps API v3上运行的问题

来自分类Dev

Google Maps API v3多边形关闭

来自分类Dev

Close all info windows google maps API V3?

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

    Esri功能服务和Google Maps API v3

  5. 5

    带有Rhomobile的Google Maps Javascript V3 API

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

    Google Maps API v3:为什么Google Maps API V3和Google Maps的搜索结果不一致?

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14

    在Google Maps API v3中是否可以按半径搜索半径?

  15. 15

    使用MVC模型在Google Maps API v3上显示标记

  16. 16

    显示/隐藏标记并使用信息窗口Google Maps API v3

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

    如何使用HTTPS调用HERE Maps API v3

  21. 21

    查找最接近我的地理位置的标记Google Maps API V3

  22. 22

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

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

    Google Maps API V3错误:RefererDeniedMapError

  27. 27

    使地图在Google Maps API v3上运行的问题

  28. 28

    Google Maps API v3多边形关闭

  29. 29

    Close all info windows google maps API V3?

热门标签

归档