Question

如何在google map中处理大量标记原创

Answer 1

在你有一个合理的标记数量的时候，使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.
clusterer.SetIcon(GIcon)

改变簇的图标

2.
clusterer.SetMaxVisibleMarkers(n)

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

3.
clusterer.SetMinMarkersPerCluster(n)

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

4.
clusterer.SetMaxLinesPerInfoBox(n)

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

Download
Clusterer2.js

ClusterMarker - Chunk 'em all up

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