如何利用谷歌地圖MarkerCluster捕捉多邊形，而不是標記？

我的程序在Google地圖上有大約20,000個標記，並且當數據加載到地圖中時它變得非常慢。然後我使用JS代碼繪製一個多邊形作爲標記的替換。它會跑得更快。也許加載標記的PNG圖像會對速度產生負面影響。

最後，我看了這篇文章

函數 'MarkerCluster' 是偉大的。但是，它只能用於Google Marker的方面。

var markerClusterer = new MarkerClusterer(map, **markerArray**)

所以是有把多邊形到這個集羣機制的一些解決方案？

任何幫助將不勝感激！

來源

2012-11-28 Gallery

我暫時舉了個例子。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <style> 
     html, body, #map_canvas { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 

    <script type='text/javascript'> 
     var mapCanvas; 

     function initalize() { 

     // Creating a map 
     var mapDiv = document.getElementById("map_canvas"); 
     mapCanvas = new google.maps.Map(mapDiv, { 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }); 

     // Generate bunch of path data 
     var sw = new google.maps.LatLng(-19.448292, -152.); 
     var ne = new google.maps.LatLng(76.150236, 58.925171); 
     var bounds = new google.maps.LatLngBounds(sw, ne); 
     mapCanvas.setCenter(bounds.getCenter()); 
     mapCanvas.setZoom(3); 

     var baseLat, baseLng, category, json = [], path; 
     for (var i = 0; i < 100; i++) { 
      baseLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat(); 
      baseLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng(); 

      path = [ 
      new google.maps.LatLng(baseLat, baseLng), 
      new google.maps.LatLng(baseLat + 1, baseLng + 1), 
      new google.maps.LatLng(baseLat, baseLng + 2) 
      ]; 
      json.push(path); 
     } 

     var bounds, polyList = []; 
     for (var i = 0, length = json.length; i < length; i++) { 
      var polyline = createPolygon(json[i]); 
      polyList.push(polyline); 
     } 
     var clusterer = new MarkerClusterer(mapCanvas, polyList); 
     } 

     function createPolygon(path) { 
     var polygon = new google.maps.Polygon({ 
      path : path, 
      strokeOpacity : 1, 
      strokeColor : "red" 
     }); 

     var lastPath = null, 
      lastCenter = null; 
     polygon.getPosition = function() { 
      var path = this.getPath(); 
      if (lastPath == path) { 
      return lastCenter; 
      } 
      lastPath = path; 
      var bounds = new google.maps.LatLngBounds(); 
      path.forEach(function(latlng, i) { 
      bounds.extend(latlng); 
      }); 

      lastCenter = bounds.getCenter() 
      return lastCenter; 
     }; 
     return polygon; 
     } 


     google.maps.event.addDomListener(window, "load", initalize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html>

enter image description here

來源

2012-11-28 09:19:57 wf9a5m75

非常感謝您！我讀過'markerclusterer'類的源代碼'JS代碼'，發現標記和聚類之間的重要關係是'POSITION'，即'google.maps.LatLng（lat，lng）'的對象。是的，這些代碼中的語句'marker.getPosition'是KEY。所以你的代碼給了多邊形對象函數'getPosition'，它會返回LatLng。結果，它通過提供這個功能創建了一個標記替換，這非常聰明！：）謝謝！ – Gallery

非常感謝，有用的解決方案。 – Boldbayar

如何利用谷歌地圖MarkerCluster捕捉多邊形，而不是標記？

回答

相關問題