将许多圈子添加到谷歌地图 [英] Adding many circles to a google map

问题描述

我试图在谷歌地图上以各种位置和大小绘制很多圈（大约1000），然后将点击事件绑定到它们。但是，新的google.maps.Circle（参数）; 这样的许多调用使得页面加载速度变慢，有时它只是永远挂起，所以我想弄清楚是否有一个更好/更快的方式来完成我想要做的事情。

我看到有一种叫做kml的图层，但似乎没有简单的方法来绘制实心圆圈，并且我不确定是否仍然可以将点击事件绑定到图层中的每个单独圆圈。

查看圆圈在Google KML常见问题页上解决方法，我不确定是否生成一个包含数千个与此相似的圆圈的KML文件将最终保存任何时间。

我也不知道如何去生成这个kml文件。

>

最后，考虑到我正在拉我试图从数据库中绘制的圆，所以我要么产生t KML文件可以随时使用，或者每次从数据库中删除或添加一个圆时生成一个新文件，以便文件保持最新。

当然，如果还有其他的选择，我会全力以赴的！

解决方案

通过 Google Maps API v3组，我能够实现地图令人惊讶的处理10,000点的覆盖。诀窍是使用画布拼贴覆盖图，它将DOM元素的数量最小化，以换取更简单/更轻量级的POJsO（普通的旧JavaScript对象）。

演示带鼠标点击事件的页面（仅适用于API v2）： http://notebook.kulchenko.com/maps/datamark

带有光标交换功能的演示页面（API v2和v3）： http ：//notebook.kulchenko.com/maps/gridmark

I'm attempting to draw many circles (around 1000) on a google map, at various locations and sizes, and then binding a click event to them. But this many calls of new google.maps.Circle(parameters); makes the page loading slow, and sometimes it just hangs forever, so I'd like to figure out if there's a better/faster way to accomplish what I'm trying to do.

I see that there's something called a kml layer, but there doesn't appear to be any easy way to draw filled circles with it and I'm not sure if I can still bind click events to each individual circle in the layer or not.

Looking at the circle workaround on the google KML faq page, I'm not sure if generating a KML file that contains thousands of circles similar to this would end up saving any time.

I also have no idea how to go about generating this kml file.

Finally, take into consideration that I'm pulling the circles I'm attempting to draw from a database, so I'd either have to generate the KML file on the fly for use or generate a new file every time a circle is removed or added from the DB so that the file stays up to date.

Of course, if there's another alternative, I'm all ears!

解决方案

With the help of others via the Google Maps API v3 Group, I was able to implement a map overlay that handles 10,000 points suprisingly well. The trick is to use a canvas tile overlay, which minimizes the number of DOM elements in exchange for much simpler/lighter-weight POJsOs (plain old JavaScript objects).

Demo page w/mouse click events (API v2 only): http://notebook.kulchenko.com/maps/datamark
Demo page w/cursor swapping (API v2 and v3): http://notebook.kulchenko.com/maps/gridmark

这篇关于将许多圈子添加到谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！