如何在谷歌地图上标记太多时优化MarkerWithLabel [英] How to optimize MarkerWithLabel on google maps when having too many markers

查看:428
本文介绍了如何在谷歌地图上标记太多时优化MarkerWithLabel的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在开发一个谷歌浏览器的应用程序,我一直在使用MarkerWithLabel库,我相信这是由谷歌开发人员编写的。我在地图上使用了一百多个标记,看起来相当顺利,直到我检查了Firefox(甚至不提IE)。在FF中这相当差劲。任何方式来优化它?



http://jsfiddle.net/zDTNS/2 下面是jsfiddle中的示例



为了说明,有200个常规标记正常工作。使用MarkerWithLabel时出现的问题

解决方案

使用MarkerWithLabel后,花了2周的时间研究和尝试各种方法,大多数建议在这里,我得出的结论是目前没有办法优化。出于某种原因,当地图顶部有div并保持同步的时候,firefox正在挣扎。在最新的Firefox上的表现几乎与IE8相同。

我发现有一吨谷歌标记不会造成任何滞后,但divs做。我最终做的是创建一个服务器端函数,将文本转换为PNG。当初始化谷歌标记,你使图标url TextToImage.aspx?text = Hello& size = 13
然后我设置新标记的锚点15,15),这成了我的新标签。我添加了一些点击和鼠标悬停的听众标签和瞧!疯狂改善性能。

I have been developing an application on google chrome, and I've been using the MarkerWithLabel library, which i believe is written by google developers. I am using a little over 100 markers on the map and it seemed to be pretty smooth until i checked in firefox (and lets not even mention IE). It is pretty damn laggy in FF. Any way to optimize it?

http://jsfiddle.net/zDTNS/2 Here is a sample in jsfiddle

To clarify, having 200 regular markers works fine. The problem shows up when using MarkerWithLabel

解决方案

After spending 2 weeks researching and trying all sorts of methods, most suggested on here, I arrived to the conclusion that there just is no way to optimize at the moment. For some reason firefox struggles when there are divs on top of the map and keeping them in sync. The performance on the latest firefox was almost the same as IE8.

I found that having a ton of google markers does not cause any lagging, but divs do. What I ended up doing was create a server side function that converts text to png. When initializing the google marker, you make the icon url TextToImage.aspx?text=Hello&size=13 Then I set the anchor of the new marker to (15, 15) and that became my new 'label'. I added some click and mouseover listeners to the label marker and voila! Insane improvement to performance.

这篇关于如何在谷歌地图上标记太多时优化MarkerWithLabel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆