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

【问题标题】：Google map multiple markers mapped to an area without coordinates谷歌地图多个标记映射到一个没有坐标的区域
【发布时间】：2020-04-25 21:24:59
【问题描述】：

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

这是要求：
客户想要显示放大到具有 4 个过滤器的国家级别的地图：
1. 基于下拉的状态过滤器，它应该填充城市过滤器中的城市，并且地图应该缩放到州级
2.基于下拉的城市过滤器应该填充区域过滤器并且地图应该缩放到城市级别
3. 基于下拉的区域过滤器，将地图缩放到区域级别。

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

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

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

我相信我仍然可以处理第四个过滤器，但让我发疯的是第三个过滤器。

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

提前致谢。

【问题讨论】：

带边界，是指一系列坐标吗？边界是如何定义的？
为了定义边界，我正在考虑使用 openstreetmaps 获取多边形坐标，按照此线程上的建议：stackoverflow.com/questions/44570996/…
我在发布答案后才意识到我可能误解了这个问题？是 1 个标记与 1 个区域相关联，还是 1 个区域与 N 个标记相关联？
您可以在多边形中添加随机标记：How to add a random point inside a polygon in Google Maps?。如果您希望它们散开，则需要使用不同的算法（或禁止在现有标记的一定距离内以及多边形之外的标记）。
@JoostK - 所以，这样想吧：假设我们在我的城市中找到了一个地区的多边形，在那个地区有 100 家商店。现在，由于未知原因，我不能询问他们的地址或坐标，但我必须在地图上为该地点放置相同数量的标记。所以，基本上，它是 1 个带有 N 个标记的区域。

标签： javascript angularjs google-maps google-maps-markers markerclusterer

【解决方案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 个挑战，即缩放和居中

【讨论】：

这在我们有地址或坐标时很有用。他没有坐标或地址以及标记。所以我认为这在这种情况下是行不通的。
@HeenaVora - 你是对的，它不会帮助我将标记放置在一个区域内，但这确实有助于我缩放和中心直到区域级别至少和我认为的那些我可以从其他 API 获取多边形坐标。