加速在谷歌地圖上有80,000個標記的頁面

Question

我想在谷歌地圖上加載80,000個標記，我有函數setMarkers（）和createMarker（）。加載需要很長時間。我怎樣才能加快頁面？

代碼如下：

function initialize() { 
    //markers details are coming from json file 
    setMarkers(map, markers); 
} 
function setMarkers(map, locations) { 
    //from location object, all the variables get values 
    //infobox code 
    //loop starts for all markers 
    createMarker(arguments); 
    //loop end for all markers 
} 
function createMarker(arguments) { 
    //marker creation code 
} 

而且是有可能使用谷歌地圖購API鍵增加速度？

Answer 1

這裏是優化你的標記方式谷歌建議（文章 Too Many Markers了！）：

1. Grid-based Clustering。基於網格的聚類通過將地圖劃分爲一定大小的正方形（每個縮放大小發生變化），然後將這些標記分組到每個網格正方形中來工作。
2. Distance-based Clustering。基於距離的聚類與基於網格的聚類相似，除了不是創建固定方形邊界的聚類，而是基於標記與聚類質心之間的距離創建聚類。
3. Viewport Marker Management。視口標記管理器的工作原理是獲取用戶可見的地圖的當前邊界，然後 - 根據地圖邊界 - 將查詢發送到服務器以獲取位於邊界內的所有標記。隨着用戶平移/縮放地圖，後續請求被髮送到服務器以獲取新標記。通常會刪除所有不再可見的標記以改善地圖的性能。
4. Fusion Tables。通過使用JavaScript API中的FusionTablesLayer，可以在地圖上顯示大量的點。由於渲染是在Google服務器上執行的，而不是在用戶的瀏覽器中執行的，因此性能得到顯着提高。
5. markerCluster（我的看法是更好地使用Marker Clusterer Plus，因爲有更少的錯誤和更好的性能）。MarkerClusterer是一個客戶端實用程序庫，將基於網格的聚類應用於一組標記。它通過遍歷集合中您希望聚類的標記進行迭代，並將每個標記添加到距離最小方形像素範圍內的最近聚類中。
6. MarkerManager。 MarkerManager允許您更加分散地定義您想要在不同縮放級別顯示的標記。 MarkerManager比MarkerClusterer有更多的參與設置，但它確實允許更多地定製它顯示的內容和位置。

注意：不要忘記標記具有優化的選項，但如果使用動畫GIF或PNG，則不會是真的，因此如果使用該類型的文件，請考慮兩次。

Answer 2

我之前在項目上遇到類似的問題。

變焦管理

根據由我不得不表現出太多的標記，用戶使用的變焦。 所以我必須找到一種方法來根據所使用的縮放級別限制顯示的標記數量。

我使用了markerManager插件（http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/examples.html）。

function initialize() { 
    var mapOptions = { 
     scaleControl: true, 
     center: new google.maps.LatLng(50, 3), 
     zoom: 17, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    mgr = new MarkerManager(map); 
}; 

然後，當您添加新標記時，使用管理器設置標記可見的最小和最大zoomLevel。 如果不在縮放範圍內，標記將不會顯示。

function add_marker(lat, lng, zoomMin, zoomMax, img, path, camPos) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lng), 
    icon: "file:///" + path + "/images/" + img + ".png" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    form1.jsCamPos = camPos; 
    form1.changePosition(); 
    }); 

    mgr.addMarker(marker, zoomMin, zoomMax); 
} 

感謝您能在最大縮放級別和更高的縮放級別，而不是顯示的所有標記添加一些更多的標記來設定你的所有的相關詳細標記，以提示用戶可放大才能看到的相關詳細標記。

這將大大提高您的應用程序的反應性。

標記地圖界限過濾

另一種方法將是異步加載取決於地圖的邊界標記。

例如，您可以向每次移動地圖時激發的bounds_changed事件添加一個偵聽器，然後獲取新邊界並調用一個webService，它將爲您提供新邊界內的所有標記。

google.maps.event.addListener(map, 'bounds_changed', function() { 
    var lat0 = map.getBounds().getNorthEast().lat(); 
    var lng0 = map.getBounds().getNorthEast().lng(); 
    var lat1 = map.getBounds().getSouthWest().lat(); 
    var lng1 = map.getBounds().getSouthWest().lng(); 

    var parameters = "{'lat0':'" + lat0 + "','lng0':'" + lng0 + "','lat1':'" + lat1 + "','lng1':'" + lng1 + "'}"; 

/* 
The webService should reply something like this : 
[ 
{"lat":50.5215,"lng":2.515,"title":"marker1"}, 
{"lat":50.5126,"lng":2.5165,"title":"marker2"}, 
{"lat":50.5127,"lng":2.54564,"title":"marker3"} 
]; 
*/ 

    $.ajax({ 
     type: "POST", 
     url: webMethod, 
     data: parameters, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      $.each (msg, function (idx) { 
       console.log (msg[idx].lat); 
       console.log (msg[idx].lng); 

       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(msg[idx].lat, msg[idx].lng), 
        title: msg[idx].title, 
        map:map 
       }); 
      }); 
     }, 
     error: function(e){ 
      alert('error!'); 
     } 
    }); 
});