Hinzufügen von marker einfach clusterers, um google-Karte

Ich habe Probleme mit dem hinzufügen von marker-clusterers Funktionalität meiner Karte. Was ich will ist die Verwendung eines benutzerdefinierten symbols für meine Marker und jeder marker sein eigenes info-Fenster, die ich möchte in der Lage sein, zu Bearbeiten.

Habe ich erledigt, aber jetzt habe ich Probleme mit dem hinzufügen marker clusterers Bibliothek-Funktionalität. Ich lese etwas über das hinzufügen von Marker-array, aber ich bin mir nicht sicher, was würde es genau bedeuten. Außerdem werden alle Beispiele mit Arrays, die ich gefunden habe, haben keine info-Fenstern und die Suche durch den code, den ich nicht finden geeignete Weg, um Sie hinzuzufügen.

Hier ist mein code (meist aus 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>

InformationsquelleAutor take2 | 2011-03-10

14

Hier ist die Arbeit jsfiddle demo

Sobald Sie eine Markierung erstellen-cluster, die Sie hinzufügen möchten, Marker zu. MarkerClusterer unterstützt hinzufügen von Markern mit Hilfe der addMarker() und addMarkers() - Methode oder durch die Bereitstellung einer Reihe von Markierungen, die an den Konstruktor:

Wenn Sie sagen, fügen Sie marker an den Konstruktor, indem Sie eine Reihe von Markern ist es ähnlich, dies zu tun:
```
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.
```
Hinzufügen, dass es mit addMarker() Sie im Grunde fügen Sie die cluster wie folgt:
```
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 wollen, um ein array hinzuzufügen:
```
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 Verweis auf MarkerClusterer und Einfache Beispiele

Basierend auf Schnipsel Ihres Codes, den Sie wollen würde, so etwas zu tun:
```
    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 nicht schaffen Ihre Macher korrekt benennen Sie alle Ihre marker auf die gleiche var marker so sind Sie eigentlich die Schaffung von drei Markern und es wird über geschrieben, wenn Sie es speichern in der var marker jedes mal. Also ging ich auf und benennen Sie Ihre Marker. Dann habe ich ein array zu speichern und pass auf das MarkerClusterer.

UPDATE: zu Ihrer createMarker Funktion, mit der man nicht zurückkehren, die marker und dann gibt es keine marker, um cluster:
```
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;
}
```
- Danke für deine Antwort. Ich habe meinen code wie empfohlen, aber es gibt immer noch nur 3 benutzerdefinierte Symbole sichtbar. Wenn ich verkleinern, ändert sich nichts, es gibt keine cluster-Symbol. Ich aktualisiert meine Frage mit dem aktuellen code.
- wie sind Sie mit der Einstellung der cluster?
- Ich bin mir nicht sicher, was du meinst. Mit var mcOptions = {gridSize: 50, maxZoom: 15}; var mc = new MarkerClusterer(map, [], mcOptions); var markerArray = new Array(Marke1, marker2, marker3); mc.addMarkers(markerArray, true);
- es gibt ein Problem mit Ihrer creatMarker Funktion...kein marker zurückgegeben wurde. ich habe es zu arbeiten, werfen Sie bitte einen Blick auf mein jsfiddle und auch die Antwort. bitte upvote und akzeptieren Sie die Antworten, wenn es Antworten auf Ihre Frage, bitte.
- Ok, aber ich kann nicht finden, ein link zu deinem jsfiddle. Können Sie fügen Sie es hier?
- sorry, ich habe gerade aktualisiert meine Antwort.
- Wenn ich sehe, dass z.B. nur die Marker angezeigt werden. Beim Auszoomen es schaltet sich nicht in die cluster-Symbol mit der Nummer 3 innerhalb der it.
- weil Sie nicht genug heraus Zoomen, und der cluster wird auf der Grundlage der Entfernung zwischen zwei Punkten glaube ich.
- Ich gezoomt, soweit es möglich ist 🙂 ich verstehe es nicht, wie es für dich sichtbar und nicht für mich. Ich bin mit Firefox 3.6.15, wenn, dass hat nichts damit zu tun.
- hehehe, ich weiß, warum. Sie müssen nicht firebug aktiviert, und ich habe console.log im Skript versuchen Sie diesen link jetzt jsfiddle.net/rD8U6/6
- Sry für das warten, ich war für eine Weile Weg. Ja, es funktioniert jetzt, danke! Ich markierte diese als eine richtige Antwort, kann aber nicht upvote es, weil ich nicht genug Ruf. Ich habe 2 weitere Fragen: Was bedeutet dieser Teil heißen: "zIndex: Math.Runde(latlng.lat() * -100000) << 5" und wie, um zu bestimmen, Wann sehe ich die endgültigen Markierungen (wie viel muss ich Zoomen, um zu sehen, bei 'normalen' Marker)?
- np thaks für akzeptieren
- eigentlich weiß ich, es ist die Einstellung zindex, die den parameter verwenden, um die Behandlung von überlappenden Marker, aber nicht sicher, was es genau tut. ich thinke der zoom ist auf der Grundlage var mcOptions = {gridSize: 50, maxZoom: 15};. das sind wirklich gute Fragen, die Sie sollten es veröffentlichen
- eigentlich zIndex: Math.round(latlng.lat()*-10000) << 5 ist ein bitshift-operation: Shifts a in binary representation b (< 32) bits to the left, shifting in zeros from the right.
- Ja, gridSize bestimmt die Gruppierung der Marker. Wenn Sie erhöhen, es werden weniger cluster-icons angezeigt werden (Marker aus dem größeren Bereich zusammengefasst sind). Wenn Sie zu verringern, gibt es mehrere cluster-Symbole, offensichtlich. Gibt es eine Möglichkeit zu vermeiden, die Benennung jeder marker im markerArray? Ich habe diese situation "var markerArray = new Array(Marke1, marker2, marker3, marker4, marker5, marker6, marker7, marker8, marker9, marker10, marker11, marker12...);" Es gibt Hunderte von Ihnen. Kann ich sagen, Karten zu verwenden Marker 1-100 für das array oder etwas ähnliches?
- sollten Sie eine andere Frage =P. aber ja, Sie können entweder tun Marker 1-100 mit forloop ODER können Sie einfach schieben Sie es auf die Globale markerArray innerhalb createMarker und verwenden nur lokalen Bereich ist var marker ich bevorzuge die später, weil es sauberer Codierung und ist besser lesbar
- Ich habe eine neue Frage hier: stackoverflow.com/questions/5266352/... ich habe versucht, mit Ihren Anregungen, aber es ist offensichtlich jenseits meiner Kenntnisse von Javascript und Google Maps API 🙂
- Danke Man ich Suche diese eine Stunde
- np hoffe, das hilft
InformationsquelleAutor KJYe.Name

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.