在 Google 地图上创建数千个信息窗口的优化策略

发布于 2024-11-16 00:37:57 字数 611 浏览 4 评论 0原文

我是 Google Maps API 的新手,刚刚接管了一个 RoR 应用程序,该应用程序使用 MarkerClusterer 在地图上绘制多达 2,000 个标记,并且每个标记都有一个关联的信息窗口。

当前的实现在 JavaScript 中创建一个 infowindow 内容字符串数组,并将 JavaScript 下载到浏览器。未压缩(没有服务器内容压缩)时,数组和 Javascript 可以大到 9 MB。

我发现与此实现相关的性能瓶颈是: 1. 在服务器上创建 2000 个字符串并将它们放入 JavaScript 数组中的时间。 (约 4-5 秒) 2. 在发送到浏览器之前,服务器压缩多兆字节 JavaScript 的时间。 (~2-3 秒)

我最初的想法是为包含所有 HTML 格式的 infowindow 内容字符串创建一个模板,以便 infowindow 内容数组中包含的唯一数据是要显示的实际原始数字。这将大大减少在服务器上组装内容字符串数组的计算时间,并相应地减少浏览器中数组消耗的内存。此外,一次只需要打开一个信息窗口。

由于不熟悉 Google Maps v3 API,我正在寻找有关这是否是最佳优化策略的任何指导。并且,任何指向实现此类策略的代码示例的指针。

预先感谢,

-斯科特

I'm new to the Google Maps API and have just taken over an RoR application that plots up to 2,000 markers on a map using MarkerClusterer and each marker has an associated infowindow.

The current implementation creates an array of infowindow content strings in JavaScript and downloads the JavaScript to the browser. Uncompressed (without server content compression), the array and Javascript can be as large as 9 MB.

The performance bottlenecks associated with this implementation that I have found are:
1. Time on server to create 2000 strings and put them in the JavaScript array. (~4-5 seconds)
2. Time on server to compress the multi-megabyte JavaScript before sending to the browser. (~2-3 seconds)

My initials thought is to create a template for the infowindow content string that contains all of the HTML formatting so that the only data contained in the array of infowindow contents are the actual raw numbers to be displayed. This should greatly reduce the compute time of assembling the content strings array on the server, and correspondingly reduce the memory consumed by the array in the browser. Also, only one infowindow needs to be open at a time.

Being unfamiliar with the Google Maps v3 API, I'm looking for any guidance as to whether or not this is the best strategy for optimization. And, any pointers to code samples that implement this type of strategy.

Thanks in advance,

-Scott

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

酒绊 2024-11-23 00:37:57

我认为您不应该加载数组中的所有 2000 个数据集,而是执行以下两种替代方案之一:

  1. 您只加载标记以及当前视口中的信息窗口。
  2. 单击标记时,您可以通过 ajax 加载信息窗口内容。

I think you should not load all 2000 datasets in your array, but doing one of 2 alternatives:

  1. You only load the markers and so the infowindows that are in the current viewport.
  2. You load the infowindow content by ajax, when clicking the marker.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文