如何在Google Map中處理大量標記(ASP.NET)(原創-翻譯)

 

         在你有一個合理的標記數量的時候，使Google Map標記是很平常的。但是一旦你有幾百個、甚至更多地標的時候，效能迅速的開始降低。在本文章中，我會告訴你一些提高效能的方法。同時我會放一個測試頁面去比較它們的效率。

         如果你是第一次使用Google Map的標記，我建議你先去瞭解一下在Google Map上使用標記的一些基本原理和操作。

The Marker Manager-Keeps track of them

您的第一選擇可能是利用MarkerManager，因為它是一個由Google提供的工具 + 生產力庫。首先要將標記添加到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

這個使用工具庫的所有都是最新的，在我最初寫這篇文章的時候還沒有。這個庫，是吳小溪寫的，Google地圖的開放源碼工具庫的一部分，便於使用，具有優良的效能。

像其他的類庫一樣，他們聚集在一起使其更容易有一個概觀，減少了可見標記的數量。觀看下面的映像，看看如何：

 

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效能很差。Google瀏覽器和Safari整體上表現出，他們的javascript引擎和效能一直很快。

 

如果你有什麼好的想法去改善這個測試，使之能夠更好的衡量直到標記在地圖上顯示實際時間，請在評論中通過共用或我的首頁聯絡我。Contact page.

 

結論

利用這篇文章中的技術，執行效果一般都很好，因為你沒有一個令人難以置信的大量的標記。對於一些特殊的場合，這些技術並不能滿足你的需求，你將不得不採取更加極端的措施，例如，建立一個大的覆蓋層，覆蓋所有的標記，但是這超出了本文的講述範圍。

 

我希望這些技術能 幫到你，Happy coding！