最近用到了Google地圖進行開發，對Google地圖的API有了初步的認識。使用Google API開發一般都會用到Marker，用來標注位置。本文將對顯示大數據量的Marker進行研究和討論。

　　問題提出：

　　如果你需要在地圖上展示大數據量的Marker，就會發現兩個問題。

　　1、性能問題：如果在地圖上添加越多的Marker，使用起來就會感覺速度越慢。速度的快慢還取決瀏覽器和計算機的配置。在google瀏覽器上會比IE上快很多。

　　 2、可用性問題。地圖上Marker越多，就會越不宜用。當然這還取決于Marker的密集度。如果這些Marker都很分散，關系不是很大。如果很密 集，用戶就看不到地圖上的東西了。如下圖：顯示10個、100個問題不大。當顯示1000個的時候，地圖被這些Marker占據了。

　　顯示10個marker，沒有什么問題

　　顯示100個，感覺有點擁擠了。

　　顯示1000個，根本看不到地圖上任何東西了。

　　解決方案：

　　方案一：減少顯示數量

　　1、在我們系統中，可以通過一個搜索框。比如：通過搜索，在地圖上標注深圳所有沃爾瑪超市的位置。

　　2、加過濾。原則跟上面一樣，減少顯示的Marker。如：加一個過濾機制，只標注人口超越100W的城市。

　　方案二：集群顯示

　　前面兩種都是通過減少marker顯示的數量來解決問題的，下面看看如果不減少marker的數量來到底同樣的效果。方案就是通過集群的方式。根據一定 規則將Marker劃分到不同的群中。根據地圖的不同縮放級別顯示不同的marker集群。當地圖縮放的時候，繼續將更多的相關的marker集中在這個 組中，用這個組代替marker顯示。當放大到一定級別再顯示marker本身。如1000個marker展示為下圖：

　　當縮小地圖顯示層級時，繼續進行相關集群：

　　但放大地圖顯示層級的時候分散集群：

　　那又根據什么規則來集群的呢？下面介紹三種集群的方式：

　　1、基于網格：將地圖分割成很多網格。根據地圖不同的縮放級別的在同一個網格中的marker集群在一個分組中。

　　2、基于距離：這個很好理解，將距離近的marker顯示在一個分組中。

　　3、基于分區：我們可以將地圖分成不同的分區，比如根據省份將地圖分成不同的分區。將省份中的marker集中在一起顯示。

　　示例：

　　下面我通過例子來實現以上的效果。

　　1、使用MarkerClusterer，MarkerClusterer是一個google地圖第三方的類庫。它是基于網格分組的。

　　創建地圖：

1 // 創建地圖
2 var options = {
3 zoom: 12,
4 center: new google.maps.LatLng(22.50, 114.07),
5 mapTypeId: google.maps.MapTypeId.ROADMAP
6 };
7 var map = new google.maps.Map(document.getElementById('map'), options);

　　在可視的地圖范圍內創建1000個marker，并使用MarkerClusterer顯示

01 google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
02
03 // 獲取地圖分界線
04 var bounds = map.getBounds();
05
06 // 獲取地圖的角
07 var southWest = bounds.getSouthWest();
08 var northEast = bounds.getNorthEast();
09
10 // 計算地圖從上到下的距離
11 var latSpan = northEast.lat() - southWest.lat();
12
13 // 計算地圖從左到右的距離
14 var lngSpan = northEast.lng() - southWest.lng();
15
16 // 創建數據保存Marker對象
17 var markers = [];
18
19 // 創建一個循環
20 for (var i = 0; i < 1000; i++) {
21
22 //創建隨機數
23 var lat = southWest.lat() + latSpan * Math.random();
24 var lng = southWest.lng() + lngSpan * Math.random();
25 var latlng = new google.maps.LatLng(lat, lng);
26
27 // 創建Marker，注意它沒有添加到地圖上面
28 var marker = new google.maps.Marker({
29 position: latlng
30 });
31
32 // 將Marker添加到數組中
33 markers.push(marker);
34
35 }
36
37 //創建一個MarkerClusterer對象，將marker數組對象傳遞給它
38 var markerclusterer = new MarkerClusterer(map, markers);
39
40 });

　　2、使用markermanager。markermanager是基于分區的方式的。

　　下面我在定義兩個省份的marker：湖南和廣東。湖南這個分區中定義長沙、常德、永州三個城市。廣東定義廣州、深圳、東莞三個城市。但層級大于6顯示城市，否則顯示省份的集群。代碼如下：

01 (function() {
02
03 window.onload = function() {
04
05 // 創建地圖
06 var options = {
07 zoom: 5,
08 center: new google.maps.LatLng(26.41, 111.61),
09 mapTypeId: google.maps.MapTypeId.ROADMAP
10 };
11 var map = new google.maps.Map(document.getElementById('map'), options);
12
13 // 初始化MarkerManager
14 var mgr = new MarkerManager(map);
15
16
17 // 創建表示湖南的marker
18 var hunan = new google.maps.Marker({
19 position: new google.maps.LatLng(28.19, 112.98),
20 icon: 'img/cluster.png'
21 });
22
23 // 給hunan添加一個點擊事件
24 google.maps.event.addListener(hunan, 'click', function() {
25
26 //設置地圖的層級
27 map.setZoom(7);
28
29 // 設置中心點
30 map.setCenter(hunan.getPosition());
31
32 });
33
34 // 創建表示廣東的marker
35 var guangdong = new google.maps.Marker({
36 position: new google.maps.LatLng(22.50, 114.07),
37 icon: 'img/cluster.png'
38 });
39
40 // 給hunan添加一個點擊事件
41 google.maps.event.addListener(guangdong, 'click', function() {
42
43 //設置地圖的層級
44 map.setZoom(7);
45
46 // 設置中心點
47 map.setCenter(guangdong.getPosition());
48
49 });
50
51
52 var states = [hunan, guangdong];
53 // 創建湖南和廣東省的城市
54 var cities = [
55 // 永州
56 new google.maps.Marker({ position: new google.maps.LatLng(26.41155054662258, 111.610107421875) }),
57 // 常德
58 new google.maps.Marker({ position: new google.maps.LatLng(29.017748018496046, 111.68701171875) }),
59 // 衡陽
60 new google.maps.Marker({ position: new google.maps.LatLng(28.22697003891834, 112.91748046875) }),
61 // 廣州
62 new google.maps.Marker({ position: new google.maps.LatLng(23.120153621695614, 113.2470703125) }),
63 // 深圳
64 new google.maps.Marker({ position: new google.maps.LatLng(22.512556954051437, 114.0380859375) }),
65 //東莞
66 new google.maps.Marker({ position: new google.maps.LatLng(22.998851594142913, 113.75244140625) })
67 ];
68
69 // 在使用MarkerManager之前，確保MarkerManager已經加載
70 google.maps.event.addListener(mgr, 'loaded', function() {
71
72 // 這些marker在 1 到 5顯示
73 mgr.addMarkers(states, 1, 5);
74
75 // 這些marker在大于6顯示
76 mgr.addMarkers(cities, 6);
77
78 // 將MarkerManager添加到地圖上
79 mgr.refresh();
80
81 });
82
83 };
84
85 })();

　　集群顯示：

　　點擊集群，分散顯示marker。

　　總結：本文就google地圖大數據量的顯示進行了探索，介紹了幾種大數據量處理的方式。