Hinzufügen eines einfachen Marker-Clusters zur Google-Karte

Question

Ich habe Probleme beim Hinzufügen von Marker-Cluster-Funktionen zu meiner Karte. Ich möchte benutzerdefinierte Symbole für meine Markierungen verwenden, und jede Markierung hat ihr eigenes Infofenster, das ich bearbeiten können möchte.

Das habe ich geschafft, aber jetzt habe ich Probleme beim Hinzufügen der Marker-Cluster-Bibliotheksfunktionalität. Ich las etwas über das Hinzufügen von Markern zu Array, aber ich bin nicht sicher, was es genau bedeuten würde. Außerdem haben alle Beispiele mit Array, die ich gefunden habe, keine Info-Windows und beim Durchsuchen des Codes habe ich keinen geeigneten Weg gefunden, um sie hinzuzufügen.

Hier ist mein Code (hauptsächlich von 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

Hier ist die Arbeitsweise jsfiddle-Demo

Sobald Sie einen Marker-Cluster erstellt haben, möchten Sie ihm Marker hinzufügen. MarkerClusterer unterstützt das Hinzufügen von Markern mit der Funktion addMarker() y addMarkers() Methode oder durch Übergabe eines Arrays von Markern an den Konstruktor:

Wenn sie sagen, fügen Sie Marker zu Konstruktor, indem Sie ein Array von Markern ist es ähnlich zu tun dies:

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.

Zum Hinzufügen mit addMarker() fügen Sie es im Grunde wie folgt zum Cluster hinzu:

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

oder wenn Sie ein Array hinzufügen möchten:

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

Hier ist der Hinweis auf MarkerClusterer y Einfache Beispiele

Ausgehend von einem Ausschnitt Ihres Codes würden Sie etwa so vorgehen wollen:

    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);

Sie erstellen Ihre Maker nicht korrekt, indem Sie alle Ihre Marker mit derselben Var benennen marker Sie erstellen also eigentlich drei Marker, und es wird jedes Mal überschrieben, wenn Sie es im var-Marker speichern. Also ging ich weiter und benannte die Marker um. Ich habe dann ein Array erstellt, um sie zu speichern und an den MarkerClusterer weiterzugeben.

UPDATE : zu Ihrem createMarker Funktion haben Sie die Markierung nicht zurückgegeben, so dass es keine Markierung zum Clustern gibt:

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;
}