Google Maps Marker Gruppierung

Ich versuche, die folgende Sache zu erreichen: Haben verschiedene Arten von Markern auf meiner Karte zum Beispiel Schulen, Bibliotheken, Bushaltestellen und ich möchte in der Lage sein, jede Gruppe von Markern anzuzeigen/zu verbergen.Google Maps Marker Gruppierung

Ich habe für eine Weile, aber nichts kam Google-Suche:/

Irgendwelche Ideen, wie dies erreicht werden kann?

Quelle

2010-07-10 Aviatrix

Strände Code arbeitet mit diesem Fix: Position: neue google.maps.LatLng (Strände [i] [1], Strände [i] [2]), – dalton

Ich habe nie so etwas getan (zeigen/verstecken Marker), so alles, was ich kann, ist ein Link zu einem Beispiel http://econym.org.uk/gmap/example_categories.htm – robertbasic

Es gibt verschiedene Möglichkeiten, dies anzugehen, aber lassen Sie mich Ihnen einen Ansatz zeigen.

Lassen Sie uns zunächst mit einer Reihe von Standorten beginnen (entlehnt aus dem Google Maps API Tutorials):

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
];

Dies ist eigentlich ein Array von Arrays. Es repräsentiert 5 australische Strände, und wir haben den Namen, Breitengrad, Längengrad und Kategorie. Die Kategorie ist in diesem Fall nur eine Nummer der Einfachheit halber.

Dann ist es wichtig, dass wir einen Verweis auf die Marker, die wir erstellen, behalten. Um dies zu tun, können wir eine markers Array verwenden, wo wir jeden neuen Marker zu speichern, und wir können auch jedes Marker-Objekt mit seiner Kategorie-ID ergänzen:

var markers = []; 

var i, newMarker; 

for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
    map: map, 
    title: beaches[i][0] 
    });  

    newMarker.category = beaches[i][3];  
    newMarker.setVisible(false); 

    markers.push(newMarker); 
}

Schließlich, wenn wir die Markierungen zeigen müssen, können wir einfach Iterieren Sie über das Array markers und rufen Sie die Methode setVisible() entsprechend der Kategorie auf, die wir zeigen möchten.

Sie können das folgende komplette Beispiel zu überprüfen:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 300px;"></div> 

    <input type="button" value="Show Group 1" onclick="displayMarkers(1);"> 
    <input type="button" value="Show Group 2" onclick="displayMarkers(2);"> 

    <script type="text/javascript"> 

    var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.88, 151.28), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 

    var i, newMarker; 

    for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
     map: map, 
     title: beaches[i][0] 
    }); 

    newMarker.category = beaches[i][3]; 
    newMarker.setVisible(false); 

    markers.push(newMarker); 
    } 

    function displayMarkers(category) { 
    var i; 

    for (i = 0; i < markers.length; i++) { 
     if (markers[i].category === category) { 
     markers[i].setVisible(true); 
     } 
     else { 
     markers[i].setVisible(false); 
     } 
    } 
    } 

    </script> 
</body> 
</html>

Screenshot aus dem obigen Beispiel, nach dem Einschalten der "Show der Gruppe 2" klicken:

Google Maps JavaScript API v3 Example: Marker Categories http://img535.imageshack.us/img535/8485/markercat.jpg

Quelle

2010-07-10 14:36:34

nettes Tutorial! Vielen Dank ! aber es gibt ein Loch in der displayMarkers - Funktion :) Wenn wir die Funktion zum Anzeigen/Verbergen verwenden, müssen wir prüfen, ob der Marker bereits ausgeblendet/angezeigt ist;) for (var i = 0 ; i Aviatrix

@Aviatrix: Mein Ansatz in dem Beispiel war es, alle Marker, die nicht mit der Kategorie Argument übereinstimmen. Dies geschah in der 'else {markers [i] .setVisible (false); } 'Teil. Dies bedeutet, dass manchmal "setVisible (false)" für bereits versteckte Marker aufgerufen wird. Ich gehe davon aus, dass das Google Maps-API den Status des Markers intern überprüft.Deshalb habe ich die Sichtbarkeit nicht mit 'getVisible()' überprüft ... Offensichtlich ist Ihr Ansatz gleich gut. –

Tippfehler im geposteten Code behoben ([funktionierendes Beispiel] (http://www.geocodezip.com/v3_SO_toggleCategories.html)) – geocodezip

Sie im Grunde Sie müssen lediglich Verweise auf Marker-Objekte in einem Array speichern, ihren Typ (Schule, Bushaltestelle, usw.) festlegen und dann bei einem Ereignis die Schleife durchlaufen und entsprechend anzeigen/verbergen:

var markers = []; 

// create Marker 

marker.locType = 'school'; //as appropriate 

function hideMarkersOfType(type) { 
    var i = markers.length; 
    while(i--) { 
     if (markers[i].locType == type) { 
      markers[i].setVisible(false); 
     } 
    } 
} 

// similar function showMarkersOfType() calling markers[i].setVisible(true);

Das sollte sowieso ein guter Anfang sein.

Quelle

2010-07-10 14:36:58

außer es wäre besser, 'markers.setMap (null);' auf diese Weise die Karte besser zu nutzen. – tim

Google Maps Marker Gruppierung

Antwort

Verwandte Themen