在谷歌地图中找到最靠近中心的N个标记

Get N Markers that are closest to the center in Google Maps

本文关键字：最靠近 谷歌地图      更新时间：2023-09-26

我试图找出如何排序谷歌地图上的前10个标记从Javascript地图的中心的距离。假设我在一个数组中有100个标记，我想显示关于HTML无序列表中最接近的前10个标记的更多信息。我该怎么做呢?我在这里找到了一个类似的例子，用于Google Maps API版本2，但没有用于版本3。

无论发生什么你需要计算所有的距离。您可以自己用简单的公式或使用Google的几何库:http://code.google.com/intl/pl-PL/apis/maps/documentation/javascript/geometry.html及其函数:computeDistanceBetween()。然后将距离存储在自定义标记属性中，例如:

marker.distance = google.maps.geometry.spherical.computeDistanceBetween(marker.position, center.position);

并按你想要的方式排序。

  1. 排序数组接近你的地图中心点。使用sort()
  2. 用slice()分割前10个。
  3. 将它们绘制在地图上。

在StackOverflow上有一些这样的问题，但没有一个真正显示出一个易于阅读和理解的完整示例，所以我把一个放在一起。这是使用lodash/underscore sortBy函数进行排序。

const map = new google.maps.Map('#map', { center: { lat: 47.6541773, lng: -122.3500004 } });
const markers = [
  new google.maps.Marker({ position: { lat: 47.6485476, lng: -122.3471675 }, map }),
  new google.maps.Marker({ position: { lat: 47.6606304, lng: -122.3651889 }, map })
  // ...
];
const sortedMarkers = _.sortBy(markers, marker => {
  google.maps.geometry.spherical.computeDistanceBetween(
    marker.position,
    map.getCenter()
  )
});
const firstTenSortedMarkers = sortedMarkers.slice(10);

sortBy函数遍历数组中的每个标记，并根据作为第二个参数的函数返回的值对列表进行排序。computeDistanceBetween函数返回一个数字，表示地图中心和标记位置之间的距离(以米为单位)，这很容易排序。

相关文章：