当前位置: 代码迷 >> Web前端 >> Google Maps API V3学习【怎么在Google Map中处理大量标记】
  详细解决方案

Google Maps API V3学习【怎么在Google Map中处理大量标记】

热度:489   发布时间:2012-11-13 10:00:50.0
Google Maps API V3学习【如何在Google Map中处理大量标记】

?在你有一个合理的标记数量的时候,使Google Map标记是很平常的。但是一旦你有几百个、甚至更多地标的时候,性能迅速的开始降低。在本文章中,我会告诉你一些提高性能的方法。同时我会放一个测试页面去比较它们的效率。

???????? 如果你是第一次使用Google Map的标记,我建议你先去了解一下在Google Map上使用标记的一些基本原理和操作。

The Marker Manager-Keeps track of them

您的第一选择可能是利用MarkerManager,因为它是一个由谷歌提供的实用工具库。首先要将标记添加到MarkerManager,而不是使用GMap2.addOverlay()逐个的将每一个Marker添加到Map。MarkerManager会不断跟踪你所有的标记。通过定义几个不同的zoom-levels,将可能会同时出现的Marker集合放在同一level上,避免在同一时间大量的Marker同时显示。

MarkerManager 最初比直接加入到地图中有些慢,但是这样添加的好处是你可以更好的控制它们。

使用addMarker(GMarker, minZoom, maxZoom?)将标记添加到MarkerManager,这个方法携带三个参数,第一个是你要添加的标记,后两个参数是可选的,但是界定了在什么level上这个标记是可见的。

A simple example

//Create a new map

var map=new GMap2(document.getElementById('map'));

map.setCenter(new GLatLng(59.5,14.0),6);

//Create a new instance of the MarkerManager

var mgr = new MarkerManager(map);

// Create a new marker?

var marker = new GMarker(new GLatLng(59.0, 13.80));?

// Add marker to the MarkerManager?

mgr.addMarker(marker);

明显的,没有谁会想MarkerManager添加单一的标记,但是如果你有几百个标记,那么可能就要这么做了。

Bulk adding the markers

使用MarkerManager更高效的办法是,首先将所有标记添加到一个数组中,然后用addMarkers(markerArray, minZoom, maxZoom?)将这个数组添加到MarkerManager。

?

??????? // Create a new instance of the MarkerManager?

??????? var mgr = new MarkerManager(map);?

??????? // Create marker array?

??????? var markers = [];?

???? ???// Loop to create markers and adding them to the MarkerManager?

??????? for(var i = 0; i < 50; i += 0.1) {?

??????????? var marker = new GMarker(new GLatLng(59.0 + i, 13.80 + i));?

??????????? markers.push(marker);?

??????? }?

??????? // Add the array to the MarkerManager?

??????? mgr.addMarkers(markers);?

??????? // Refresh the MarkerManager to make the markers appear on the map?

??????? mgr.refresh();

???????? 请注意,在将存有标记数组添加到MarkerManager之后,必须调用mgr.refresh()。在逐个添加Marker的时候是不需要的。

附加方法

removeMarker(marker)

从MarkerManager中移除一个标记。

clearMarkers()

移除所有标记。

getMarkerCount(zoom)

返回在指定的zoom-level下的标记个数。

?

MarkerManager是Google提供的一个实用工具库。从下面的链接你可以下载源代码以及说明文档和例子。Google Maps MarkerManager?SVN:

http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/

?

Marker Light - Markers on a diet(高亮标记-首都标记)

Google的Pamela Fox 为减少复杂标记,从而提高效率的MarkerLight制作了一个简单的程序。这样做的代价是,真的仅仅是在地图上显示一个图片,但你不能与之交互。如果你不需要与程序交互,那么这种办法真的是一种简单的提高性能的办法,这样做唯一的区别就是你创建的是一个MarkerLight,而不是一个GMarker。

作者Pamelas后来解释了为什么这种方法会提高效率:

GMarker之所以耗时这么长是因为它实际上是由多个DOM元素构成-前景,阴影,打印版本,可点击区域等。

如果你的目的只是显示,那么你可以选择象MarkerLight那样创建一个带有背景URL的DIV那样去创建一个GOverlay的扩展(或者背景颜色、甚至更好的)

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ------Pamela Fox

以下是如何使用它:

map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"}));

?

red_dot.png这个图片是用于marker中的。这是最小最简单的一个。你可以尝试在Pamelas test page上用不同数量的标记测试效率。Download markerlight.js

?

Using Marker Light in combination with MarkerManager-结合MarkerManager使用Marker Light

用MarkerManager的集中式添加MarkerLight的好处很多,而且真的很简单,只是将二者结合起来。

mgr.addMarker(new MarkerLight(latlng, {image: "red_dot.png"}));

这样做的原因是你可以显示在不同缩放级别下不同数量的标记。这种方式可以确保不会有太多的标记在同一时间显示。

Clusterer - Only show what you need

另一种方法是使用ACME实验室群集Clusterer。这是一个第三方库,提供了更快捷的方式加入标记。它是在BSD许可证下发布,并免费提供。

只需要做两件事情,效率会更快:

?????????1.只有当前可见的标记会被建立。

???????? 2.如果有太多的标记需要显示,那么它们会组合在一起成为群集标记。?

这会让你的地图上即使有成千上万个标记依然能保持良好的性能。我的测试表明,这种方法的效率要显著快于使用MarkerManager的方式。

以下是如何使用它:

??????? // Create a Clusterer object?

??????? var clusterer = new Clusterer(map);?

??????? // Create marker?

??????? var marker = new GMarker(new GLatLng(57.8, 14.0));?

??????? // Add marker to the map?

??????? clusterer.AddMarker(marker, 'text to infobox');?

调用clusterer.RemoveMarker(marker)方法来从Map中移除标记。另外还有一些方法来改变标志的行为。

  1. 1.???????clusterer.SetIcon(GIcon)?

改变簇的图标

  1. 2.???????clusterer.SetMaxVisibleMarkers(n)?

设置标记最多可见的数量门限,默认值是150.

  1. 3.???????clusterer.SetMinMarkersPerCluster(n)

为一个标记集合设置最少的标记数,默认值是5.

  1. 4.???????clusterer.SetMaxLinesPerInfoBox(n)

设置信息框内文本的最大行数,默认值是10.

Download Clusterer2.js

?

ClusterMarker - Chunk 'em all up

ClusterMarker是一个根据GNU通用公共许可证发布的免费javascript库,可以集中添加标记。这个库的独特行在于它会自动检测标记,彼此相交和集成为一个标记群集。

下面的图片说明是如何工作的:


Images by?Martin Pearman

该构造函数有两个参数,如下:

var cluster = new ClusterMarker(map, options).

?

Map是对一个有如下属性的对象引用的 map对象和选项的参考(map?is a reference to the map object and?options?is an object literal that can have these properties:)

  1. 1.???????clusterMarkerIcon [GIcon]

?????????将默认的簇标记图标更改为你所选择的图标。

  1. 2.???????markers [array]

?????????所有你想传递给ClusterMarker的标记的数组

除了这些属性,你也可以使用类中的其他所有属性,查看完整的文档说明列表documentation。

如下是如何使用最少的代码量,用ClusterMarker添加标记:

??? var markerArray = [];??

??? // Insert code to fill the markerArray with markers...??

??? // Creating a new cluster by adding the map and the markerarray??

??? var cluster = new ClusterMarker(map, {markers: markerArray});??

??? // Refreshing to show the added markers??

cluster.refresh();

这段代码将会在地图上插入标记,如果他们足够近的话,就用一个图标表示他们。欲了解更多关于如何细粒度操作的几种方法和属性,有关详细说明类库是如何工作的,在Clustermarker 项目页面上有很多优秀的文档。Clustermarker Project page.

MarkerClusterer - The new kid in town

这个使用工具库的所有都是最新的,在我最初写这篇文章的时候还没有。这个库,是吴小溪写的,谷歌地图的开放源码工具库的一部分,易于使用,具有优良的性能。

像其他的类库一样,他们聚集在一起使其更容易有一个概观,减少了可见标记的数量。观看下面的图像,看看如何:


Image by?Xiaoxi Wu

?

它的构造函数需要三个参数,第一个是地图的引用,第二个是一个GMarkers数组,第三个被选择的对象与文字。只有第一个参数是必须的。

??????? var markers = [];??

??????? // Insert code to fill the markerArray with markers...??

??????? // Creating a new cluster by adding the map and the array of markers??

??????? var markerCluster = new MarkerClusterer(map, markers);?

查看完整的说明文档和它的功能documentation。更多信息去GoogleGeo开发博客读MarkerClusterer: A Solution to the Too Many Markers Problem。

?

Compare performance


?

Compare the different techniques on the?Test page

我的灵感来自于Pamela Fox的对MarkerLight的测试页,我也做了一个我自己的测试页

,你也可以测试本文中所有不同做法的性能。

结果:

我在几个不同的浏览器运行了测试,每一个测试,我使用不同的技术添加500个标记,每次测试之间我刷新浏览器。所有的测试平台采用一个具有3.60 GHz的奔腾4处理器和超线程运行Windows XP的2 GB内存的PC。

Load times in milliseconds (ms)


?在这个测试中,Clusterer2是所有技术中最快的一个。但是要知道这是不是真实的数据,因为我只能够测量从我提交它们到标记传递到地图的时间,而不是知道在地图上看见标记的实际时间。当考虑到这方面,我觉得MarkerClusterer是最快的技术,紧随其后的是ClusterMarker。

?

当谈到浏览器,性能最高的是带有绿色标记的浏览器,性能最差的带有红色标记的浏览器。毫无疑义,IE性能很差。谷歌浏览器和Safari整体上表现出,他们的javascript引擎和性能一直很快。

?

如果你有什么好的想法去改善这个测试,使之能够更好的衡量直到标记在地图上显示实际时间,请在评论中通过共享或我的主页联络我。Contact page.

?

结论

利用这篇文章中的技术,执行效果一般都很好,因为你没有一个令人难以置信的大量的标记。对于一些特殊的场合,这些技术并不能满足你的需求,你将不得不采取更加极端的措施,例如,创建一个大的覆盖层,覆盖所有的标记,但是这超出了本文的讲述范围。

?

我希望这些技术能 帮到你,Happy coding!

1 楼 mengqingfei 2010-09-11  
javascript库,可以集中添加标记。这个
  相关解决方案