So verbergen Sie Google Maps-API-Marker mit jQuery

Question 1

Hallo, das ist vielleicht eine wirklich dumme Frage, aber ich versuche, Markierungen verschwinden zu lassen, wenn sie angeklickt werden. Die Markierung befindet sich korrekt auf der Karte, aber wenn ich darauf klicke, tut sie nichts. Ich habe mich gefragt, warum es nicht funktioniert. Vielen Dank!

  <script type="text/javascript" src="https://stackoverflow.com/questions/9594130/jQuery.js"></script>
  <script type="text/javascript">

  $(document).ready(function(){
      var myOptions = {
        center: new google.maps.LatLng(40.1, -88.2),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var myLatlng = new google.maps.LatLng(40.1, -88.2);
      var temp_marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:"Hello World!"
        });

      console.log($(temp_marker));
      console.log(temp_marker);

      //temp_marker.click(function(){$(this).hide();});

      $(temp_marker).click(function(){console.log("click is working"); $(this).hide();});
          });
  </script>
</head>
<body>
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Question 2

temp_marker ist ein Javascript-Objekt, kein DOM-Element. Um einen Listener an die Markierung anzuhängen (die API kümmert sich um die Einzelheiten, an welches DOM-Element angehängt werden soll und wie), sollten Sie das eigene Ereignissystem der Google Maps-API wie folgt verwenden:

  google.maps.event.addListener(marker, 'click', function() {
    marker.setVisible(false); // maps API hide call
  });

Ihre Dokumentation: Google Maps Javascript API v3 – Veranstaltungen

Question 3

Wenn Sie Bens Notizen erweitern, sollte dies dorthin gehen, wo Sie Ihren Marker deklariert haben – zum Beispiel:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: image
});
google.maps.event.addListener(beachMarker, 'click', function() {
  beachMarker.setVisible(false); // maps API hide call
});
}

Ich habe Ewigkeiten gebraucht, um das herauszufinden. Großes Lob an Ben! Vielen Dank!

Question 4

Ben hat Ihnen die halbe Antwort gegeben. Sobald Sie das Markierungsklickereignis erkennen können, müssen Sie die Markierung „ausblenden“ oder von der Karte entfernen. Der Standardweg, dies mit Google Maps zu tun, ist dies:

this.setMap(null);

Sie können die Karte dann wieder anzeigen, indem Sie setMap verwenden, um Ihr Kartenobjekt anstelle von null zuzuweisen.

Question 5

Sie können eine Markierung anzeigen, indem Sie die Sichtbarkeit einstellen true und verstecken Sie es, indem Sie die Sichtbarkeit einstellen false

marker.setVisible(false); // hide the marker

Question 6

marker ist ein Google Maps-Objekt, kein DOM-Element. Jquery arbeitet mit DOM-Elementen.

Question 7

Ich bin mir nicht sicher, ob Sie die Markierung einfach ausblenden können, aber der geeignete Haken für das Click-Ereignis wäre, so etwas zu tun, wenn Sie deklarieren marker

google.maps.event.addListener(marker, 'click', function() {
    // do your hide here
});

Möglicherweise müssen Sie die Markierung von der Karte entfernen, anstatt sie zu “verstecken”.

Wofür versuchen Sie, die Markierungen zu verstecken? Müssen Sie in der Lage sein, den Marker erneut anzuzeigen? Wie wollen Sie dies erreichen?