在谷歌地图上加载 100-200K 标记

     2023-05-06     102

关键词:

【中文标题】在谷歌地图上加载 100-200K 标记【英文标题】:Loading 100-200K markers on google map 【发布时间】:2015-12-10 12:32:33 【问题描述】:

目前我正在使用 Google Maps v.3 API 在地图上绘制标记。 我总共有大约 500 个标记。

出于显示目的,我在浏览器的客户端使用 markerCluster 并使用此工具对标记进行分组。

但是,我计划扩大位置数量,并假设它可以快速增长到 100K 甚至 200K。

我做了一些压力测试,发现当前的解决方案基本上会杀死浏览器和大约 10-20K 标记。

所以我的问题是绘制这么多标记的最佳方法是什么(不需要谷歌地图)?

我读过类似问题的帖子,例如:

Showing many markers in Google Maps

Best solution for too many pins on google maps

基本上人们建议使用一些集群器来显示,我已经使用了。

或者使用融合表来检索数据,这不是一个选项,因为数据必须保留在我的服务器上。另外我假设显示功能受限于融合表。

我正在考虑实现以下场景:

在每个页面缩放/加载 - 发送带有显示视图边界的 ajax 请求,在所有边添加大约 30% 并检索标记,这些标记仅属于该地理区域。 添加 30% 以防用户缩小,以便我可以快速显示周围的其他标记,然后在后台进一步检索周围的其余标记(更广阔的领域)

当标记的数量超过 50 时,我计划应用聚类来进行显示。但是由于javascript中的markerCluster非常慢,即不是markerCluster而是google本身,因为它仍然应用所有标记的位置,我计划通过将显示地图的边界分割成大约15 * 15网格在服务器端进行聚类并将标记放入特定的单元格,然后基本上发送到带有内部标记数量的客户端集群(例如,对于热图)。然后将簇显示为标记。

您能否提供一些类似的见解。一般说得通吗。或者这是一种愚蠢的方法,因为 ajax 请求将在每次地图缩放和移动时发送到服务器,并且基本上会因冗余请求而使服务器过载?

我想要实现的是在大型标记数据集上获得良好的用户体验(在 2 秒内加载)。

【问题讨论】:

改为通过ajax调用批量带marker,批量绘制 @sunil 你能详细说明一下吗?因此,为特定区域加载批次并逐个区域绘制它们 - 我认为这对用户来说将是一团糟。 另一种思考方案的方式是,您在服务器上有多级矢量切片 - 就像地图切片一样,但这些“切片”是区域内标记/集群位置的位置。前端根据缩放级别和范围请求此类“图块”。客户端可以缓存这样的“图块”,因此可能不需要在每次缩放和平移时重新加载。 【参考方案1】:

你的方法是可靠的。如果可能的话,您需要预先计算集群并将它们缓存在服务器端,它们的更新策略取决于底层数据集更改的频率。

Google 地图有大约 20 个缩放级别,具体取决于您在地球上的位置。根据您的数据的聚类程度,如果您总共有 200,000 个标记并且愿意在给定时间在地图上显示大约 500 个,计算所有群集位置和原始标记,您最终只会存储大约 2n = 400,000 个位置服务器-side 结合了所有缩放级别。

可能的集群更新策略:

更新每个添加的新标记。如果您需要高度的数据及时性,则可能适用于具有少量写入的读取繁重的应用程序。 按计划更新 如果((自上次聚类传递以来有任何新标记 && 缓存早于 X)|| 自上次聚类传递以来有超过 Y 个新标记),则启动更新

将这些标记存储在本地支持地理数据的数据库中可能是有益的。这允许类似 SQL 的语句查询位置。

在客户端,我会考虑在任一侧获取 50% 的保证金,而不是 30%。 Google 放大 2 的幂。这将允许您显示一个完整的缩放级别。

接下来,如果这个应用程序会被大量使用并且值得优化,我会在客户端放大时记录服务器端。尝试分析您的使用情况,以便确定用户是否经常放大和缩小。使用实心数字(例如“70% 的用户在检索初始结果后放大,20% 缩小”),您可以确定是否值得为您的用户预加载下一层缩放数据,以获得 UI响应能力。

【讨论】:

感谢您的准确回答!它指导我构建我们的解决方案,并且我写了一篇关于如果对更多细节感兴趣的人的博客文章:how I cached map clusters and achieved a ~50x speedup 不错。那是你写的一篇非常详尽的文章,其中有很多关于你使用 Redis 的方法的详细信息。感谢分享。

如何在谷歌地图android上设置多个标记?

】如何在谷歌地图android上设置多个标记?【英文标题】:howtosetthemultiplemarkerongooglemapandroid?【发布时间】:2020-04-2214:26:50【问题描述】:我已经完成了具有多个位置的谷歌地图标记,并且我添加了一些带有医院名称、经度和纬度... 查看详情

在谷歌地图上绘制标记时是不是可以禁用标记?

】在谷歌地图上绘制标记时是不是可以禁用标记?【英文标题】:Isitpossibletodisableamarkerwhiledrawingitongooglemap?在谷歌地图上绘制标记时是否可以禁用标记?【发布时间】:2015-11-1022:28:41【问题描述】:我正在使用googlemapapiv2开发应... 查看详情

无法在谷歌地图上看到多个标记

】无法在谷歌地图上看到多个标记【英文标题】:UnabletoseemultiplemarkerongoogleMap【发布时间】:2013-11-0815:43:30【问题描述】:我想在谷歌地图上显示多个标记。我的latlng坐标是从Parse数据库中获取的,但我看不到标记。我的第二个... 查看详情

在谷歌地图标记上显示信息

】在谷歌地图标记上显示信息【英文标题】:DisplayinformationonGoogleMapsmarker【发布时间】:2019-05-1716:33:40【问题描述】:我正在尝试获取保存在firebase实时数据库中的信息,并使用GoogleMapsAPI在地图上显示它们。这是我的火力基地这... 查看详情

如何在谷歌地图上放置标记

】如何在谷歌地图上放置标记【英文标题】:Howtoplacemarkersongooglemap【发布时间】:2011-08-1523:54:58【问题描述】:我使用来自primefaces的谷歌地图工具。我希望我的用户能够在地图上只放置一个标记。坐标值应存储在托管bean变量中... 查看详情

如何在谷歌地图上添加多个标记

】如何在谷歌地图上添加多个标记【英文标题】:Howtoaddmultiplemarkersonthegooglemap【发布时间】:2021-09-1207:14:33【问题描述】:我正在尝试从从firebase读取的坐标中添加多个标记。它读取所有坐标并存储在列表中。我创建了addMarker函... 查看详情

用户如何在谷歌地图颤振上添加多个标记

】用户如何在谷歌地图颤振上添加多个标记【英文标题】:Howcanuseraddmultiplemarkerongooglemapsflutter【发布时间】:2020-03-1413:43:54【问题描述】:当用户长按地图时,用户如何添加多个标记。在这段代码中,我完成了单张地图。当用... 查看详情

我想在谷歌地图上显示标记,如附图

】我想在谷歌地图上显示标记,如附图【英文标题】:Iwanttoshowmarkerongooglemapliketheattachedimage【发布时间】:2019-03-0503:15:00【问题描述】:我想在附加的图像中显示我当前的位置标记图标。【问题讨论】:检查这个:***.com/questions/... 查看详情

只允许用户在谷歌地图上放置 1 个标记

】只允许用户在谷歌地图上放置1个标记【英文标题】:Allowingusertoplace1markerongooglemaponly【发布时间】:2021-01-2304:25:49【问题描述】:我一直在限制用户可以在Google地图的地图上点按的标记数量问题:每当用户点击谷歌地图时,标... 查看详情

如何在谷歌地图上放置图标标记,图标数量是不是有配额?

】如何在谷歌地图上放置图标标记,图标数量是不是有配额?【英文标题】:HowcanIputiconmarkersonGooglemaps,andisthereaquotaonnumberoficons?如何在谷歌地图上放置图标标记,图标数量是否有配额?【发布时间】:2012-06-2221:02:02【问题描述】... 查看详情

按钮单击dialogFragment后如何在谷歌地图上添加标记?

】按钮单击dialogFragment后如何在谷歌地图上添加标记?【英文标题】:HowdoyouaddamarkerongooglemapafterbuttonclickondialogFragment?【发布时间】:2020-07-1905:01:42【问题描述】:我正在尝试创建一个应用程序,允许用户在地图上发布标记,该... 查看详情

如何在谷歌地图android上添加标记?

】如何在谷歌地图android上添加标记?【英文标题】:Howtoaddmarkerongooglemapsandroid?【发布时间】:2017-12-2517:42:04【问题描述】:我是Android编程的初学者。我已经看过类似的问题和答案,但我仍然无法弄清楚为什么这不起作用。当我... 查看详情

使用当前位置将折线绘制到目的地,并在谷歌地图上添加标记,标记颤动

】使用当前位置将折线绘制到目的地,并在谷歌地图上添加标记,标记颤动【英文标题】:Usecurrentlocationtodrawpolylinestoadestinationandalsotoaddmarkersongooglemapswithmarkersflutter【发布时间】:2021-09-2311:53:11【问题描述】:我有一个带有谷歌... 查看详情

我想通过从 json 获取经度和纬度在谷歌地图上显示标记

】我想通过从json获取经度和纬度在谷歌地图上显示标记【英文标题】:iwanttoshowmarkerongooglemapbygettinglongitudeandlatitudefromjson【发布时间】:2016-12-1506:13:40【问题描述】:我想通过从json获取经度和纬度来在谷歌地图上显示标记。如... 查看详情

使用Javascript在谷歌地图上的多个标记之间画线

】使用Javascript在谷歌地图上的多个标记之间画线【英文标题】:DrawLinesbetweenMultiplemarkersonGoogleMapusingJavaScript【发布时间】:2019-01-1920:30:38【问题描述】:我正在尝试在Google地图上的多个标记之间画线。多个标记的绘图是成功的... 查看详情

无法在谷歌地图android上动态设置多个标记

】无法在谷歌地图android上动态设置多个标记【英文标题】:UnabletosetMultiplemarkersdynamicallyongooglemapsandroid【发布时间】:2019-11-0807:53:39【问题描述】:我正在使用推送器从另一台设备接收位置。在我的地图中,我想从推送器数据中... 查看详情

如何根据沿线的距离在谷歌地图折线上添加标记?

】如何根据沿线的距离在谷歌地图折线上添加标记?【英文标题】:HowtoaddmarkersonGoogleMapspolylinesbasedondistancealongtheline?【发布时间】:2011-02-1111:46:19【问题描述】:我正在尝试创建一个谷歌地图,用户可以在其中绘制他步行/跑步/... 查看详情

允许用户在谷歌地图上创建和编辑标记的活动

】允许用户在谷歌地图上创建和编辑标记的活动【英文标题】:ActivitytoallowuserstocreateANDeditamarkerongooglemaps【发布时间】:2016-10-3117:54:19【问题描述】:最近,我一直在尝试使用GoogleMap的API创建一个带有androidstudio的应用程序。目... 查看详情