向Google地圖添加簡單標記羣集器

Question

我在向地圖添加標記羣集器功能時遇到問題。我想要的是對我的標記使用自定義圖標，每個標記都有自己的信息窗口，我希望能夠編輯。

我做到了，但現在我添加標記羣集庫功能時遇到問題。我讀了一些關於向數組添加標記的內容，但我不確定它到底意味着什麼。此外，所有與數組相關的示例都找到了，沒有信息窗口，也沒有找到合適的方法來添加它們。

這裏是我的代碼（主要來自Geocodezip.com）：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <style type="text/css"> 
    html, body { height: 100%; } 
    </style> 
<script type="text/javascript"> 
//<![CDATA[ 
var map = null; 
function initialize() { 
    var myOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(43.907787,-79.359741), 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
           myOptions); 

var mcOptions = {gridSize: 50, maxZoom: 15}; 
var mc = new MarkerClusterer(map, [], mcOptions); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
      }); 

     // Add markers to the map 
     // Set up three markers with info windows 

      var point = new google.maps.LatLng(43.65654,-79.90138); 
      var marker1 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.91892,-78.89231); 
      var marker2 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.82589,-79.10040); 
      var marker3 = createMarker(point,'Abc'); 

      var markerArray = new Array(marker1, marker2, marker3); 
      mc.addMarkers(markerArray, true); 


} 

var infowindow = new google.maps.InfoWindow(
    { 
    size: new google.maps.Size(150,50) 
    }); 

function createMarker(latlng, html) { 
    var image = '/321.png'; 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: image, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     }); 
} 

//]]> 
</script> 

Answer 1

這裏是工作jsfiddle demo

一旦你創建一個標記集羣，你將要標記添加到它。 MarkerClusterer支持添加使用addMarker()和addMarkers()方法標記或通過提供標記的數組構造函數：

當他們說加標記通過提供標記的陣列它類似於這樣做是爲了構造器：

var markers = []; //create a global array where you store your markers 
for (var i = 0; i < 100; i++) { 
    var latLng = new google.maps.LatLng(data.photos[i].latitude, 
     data.photos[i].longitude); 
    var marker = new google.maps.Marker({'position': latLng}); 
    markers.push(marker); //push individual marker onto global array 
} 
var markerCluster = new MarkerClusterer(map, markers); //create clusterer and push the global array of markers into it. 

要使用它，你addMarker()基本上把它添加到集羣像下面添加：

var markerCluster //cluster object created on global scope 

//do your marker creation and add it like this: 
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map 

，或者如果你想添加的數組：

var markerCLuster //cluster object created on global scope 

//do your marker creation and push onto array of markers: 
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map 

下面是引用MarkerClusterer和Simple Examples

基於您的代碼片段的，你會想要做這樣的事情：

var mcOptions = {gridSize: 50, maxZoom: 15}; 
    var mc = new MarkerClusterer(map, [], mcOptions); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
      }); 

     // Add markers to the map 
     // Set up three markers with info windows 

      var point = new google.maps.LatLng(43.65654,-79.90138); 
      var marker1 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.91892,-78.89231); 
      var marker2 = createMarker(point,'Abc'); 

      var point = new google.maps.LatLng(43.82589,-79.10040); 
      var marker3 = createMarker(point,'Abc'); 

      var markerArray = new Array(marker1, marker2, marker3); 
      mc.addMarkers(markerArray, true); 

你不是被命名正確創建制造商所有的標記到相同的var ，所以你實際上正在創建三個標記，並且每次將它存儲在var標記中時都會被寫入。所以我繼續並重新命名你的標記。然後我創建了一個數組來存儲它們並傳遞給MarkerClusterer。

UPDATE：您createMarker功能，你沒有返回標記，然後，沒有標記集羣：

function createMarker(latlng, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
    }); 

    return marker; 
}