谷歌地图多个标记映射到一个没有坐标的区域

Question

我的客户有一个非常奇怪的要求，我不确定它是否可以实现。

要求如下：
客户端希望显示缩放到具有 4 个筛选器的国家/地区级别的地图：
1. 基于下拉列表的状态筛选器，应填充城市筛选器中的城市，地图应缩放到状态级别
2。基于下拉的城市过滤器，应填充区域过滤器，地图应缩放到城市级别
3。基于下拉的区域过滤器，可将地图缩放到区域级别。

这就是它变得棘手的地方：
一旦地图在区域级别缩放，它应该显示该区域中的所有标记，并且没有一个标记具有坐标或地址。它们仅归因于该区域边界，并在该区域中随机/均匀分布，以便所有标记都可见。

标记聚类在这里应该没问题，但我不知道如何将标记本身放置在没有坐标或地址的区域中，仅基于区域边界坐标。

现在是第四个过滤器：
4。 搜索框过滤器，该过滤器将仅在这些区域标记内搜索数据，无论显示匹配项，其余部分将被隐藏

我相信我仍然可以照顾第 4 个过滤器，但让我发疯的是第 3 个过滤器。

是否有任何机制可以将多个标记(没有坐标或地址，仅与区域边界相关联(放置在突出显示的区域边界内，并在该区域内随机/均匀分布，以便所有标记都可见？

提前谢谢。

Answer 1

解决这个问题的一种方法是使用谷歌地图中LatLngBounds类的getCenter。这确实需要从其他地方获取多边形坐标。

let coords = [{lat: -34, lng: 151},{lat: -34.5, lng: 151.5},etc]
let bounds = new google.maps.LatLngBounds();
coords.forEach(LatLng => bounds.extend(LatLng));
let center = bounds.getCenter(); //returns LatLng variable

这也可用于将您的谷歌地图集中在一个区域，具有 fitBounds 函数：

map.fitBounds(bounds);

使用它可以解决您的 2 个挑战，缩放和中心