在 Google 地图上创建数千个信息窗口的优化策略
我是 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为您不应该加载数组中的所有 2000 个数据集,而是执行以下两种替代方案之一:
I think you should not load all 2000 datasets in your array, but doing one of 2 alternatives: