Toggle hide/show Google map Marker

Habe ich eine benutzerdefinierte Google-Karte mit Markierungen der Künstler Standorten. Ich möchte 8 verschiedene Kategorien von Marken. Habe ich gelesen, dass Sie arrays von Markern und Kategorie zuweisen, aber ich weiß es ehrlich gesagt nicht wissen, wo Sie anfangen..

Ich denke, diese Frage kommt in der Nähe, was ich will:
Toggle on/off-Google map-Markierungen nach Kategorien.
Versucht man, die arbeiten, aber ohne Erfolg, ich habe einfach zu wenig wissen.

Hier ist mein HTML. Ich habe eine Karte und ein paar Checkboxen bereit, die Checkboxen sind nicht noch verwendet.

<body onload="initialize()">

<div id="map_container">
    <div id="map_canvas" style="width:700px; height:350px">
    </div>
</div>

<div id="map_filter">
    <form action="#">
      <input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br />
      <input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br />
      <input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label>
    </form> 
</div>

</body>

Und hier ist mein JS. Ich habe einen cat1 Schatten und cat1-Symbol, das sollte 8 verschiedene Arten, aber dies vielleicht nicht der Weg, es zu tun, so hielt ich es nur bei einer Katze für die Lesbarkeit.
Dann habe ich einen marker (art1) , hat seine eigene pos, Schatten etc.

function initialize() {
var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
var settings = {
    zoom: 13,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);

var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);

var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
var art1Marker = new google.maps.Marker({
    position: art1Pos,
    map: map,
    icon: cat1Icon,
    shadow: cat1Shadow,
    title:"Beeldende kunst",
    zIndex: 4
});

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

}

Also.. Was ist der beste Weg, um verschiedene arrays von Marker, und setzen Sie deren Sichtbarkeit mit dem Kontrollkästchen?

Auch, würde ich mag, um in der Lage sein, um Adressen zuzuweisen Markierungen in der Stelle, sucht sich die Koordinaten.

Danke

InformationsquelleAutor meneerfab | 2012-06-21

  1. 6

    Der beste Weg, um erstellen Sie verschiedene arrays von Marker ist, so etwas zu tun. Sie sagten, Sie hatten 8 Kategorien von Markern, so tun dies 8 mal.

    var locations = [

                 ['Shanghai', 31.232, 121.47, 5885],
                 ['Beijing', 39.88, 116.40, 6426],
                 ['Guangzhou', 23.129, 113.264, 4067],
                 ['Shenzhen', 22.54, 114.05, 3089],
                 ['Hangzhou', 30.27, 120.15, 954],
                 ['Hong Kong', 22.39, 114.10, 1885]
               ];

function getMarkers() {
    for (i = 0; i < locations.length; i++) { 
            marker[i] = new MarkerWithLabel({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                draggable: false,
                map: map,
                    labelContent: locationsCA[i][3],
                icon: new google.maps.MarkerImage(iconArray[i]),
                labelAnchor: new google.maps.Point(30, 0),
                labelClass: "labels", //the CSS class for the label
                 labelStyle: {opacity: 0.75}
            });

    Als Sie für Ihre zweite Frage zum Umschalten der Sichtbarkeit mit Kästchen, ich weiß nicht, wie zu setzen, um den check-Boxen, aber die toggle-Funktion kann einfach umgesetzt werden mit einem event-trigger.
    Ob es eine Markierung oder klicken Sie auf zoom, oder jede andere Veranstaltung (überprüfen Sie die Dokumentation für Veranstaltungen), erhalten Sie eine Aktion einrichten, mit folgenden, die Veranstaltung. Hier ist ein Beispiel.

    google.maps.event.addListener(map,'zoom_changed',function () {
         if (map.getZoom() >= 4) {
            hideMarkers();          
         }
}

    Und Ihre hideMarkers () - Funktion mit diesen Befehl verwenden, um es unsichtbar

    marker.setVisible(false);

    Hoffe, das hilft

    Ich habe versucht, diese (und ich verstehe die arrays jetzt besser), aber ich bekomme eine Menge Fehler wie "Marke wird nicht definiert ", "locationsCA ist nicht definiert" und "iconArray ist nicht definiert"
    Gut, Sie kann nur laufen-snippet. Wie Sie sagte locationsCA und iconArray ist nicht definiert, so müssen Sie diese definieren. Für marker ist nicht definiert, das kann bedeuten, dass Sie noch nicht definierten marker mit label, und in diesem Fall löschen Sie einfach das gesamte label Teil.
    Denken Sie daran, dass die meisten von den marker-Optionen sind optional, außer, wie Symbol, ziehbar, labelAnchor, etc. Die erforderlich sind position und Karte:Karte.
    Ich denke, ich bin nicht ganz bereit, zu Experimentieren mit dieser, es werde einfach sein, zu erraten und nach dem Zufallsprinzip verschieben und code-snippets.. das ist das erste mal arbeite ich mit dem google maps api, und ich denke, das geht über meinem Kopf 🙂
    Danke für die Antwort. Nur ein FYI, dass die addListener () - code-snippet, fehlen die schließen ); auf.

    InformationsquelleAutor krikara

  2. 1

    können Sie speichern Sie in einem array, und setzen Sie die visbility mit marker.setMap(null) für eine unsichtbare und marker.setMap(map) sichtbar.

    siehe das Beispiel aus den docs:
    https://developers.google.com/maps/documentation/javascript/examples/marker-remove

    Arbeitete für mich. Die einzige Sache, die getan werden muss außerdem - wenn es eine animation auf die Markierung, gesetzt werden muss, um wieder nach setMap(map), denn es scheint unset auf setMap(null).

    InformationsquelleAutor cyptus

Schreibe einen Kommentar