web-dev-qa-db-de.com

So verbergen Sie Google Maps-API-Marker mit jQuery

Hallo, das könnte eine wirklich dumme Frage sein, aber ich versuche, Markierungen verschwinden zu lassen, wenn sie angeklickt werden. Die Markierung befindet sich ordnungsgemäß auf der Karte, aber wenn ich sie anklicke, tut sie nichts. Ich habe mich gefragt, warum es nicht funktioniert. Vielen Dank!

  <script type="text/javascript" src="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>

21
wayfare

temp_marker ist ein Javascript-Objekt, kein DOM-Element. Um einen Listener an die Markierung anzuhängen (die API wird die Besonderheiten des DOM-Elements, an das und wie geknüpft werden soll) behandeln, 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 - Ereignisse

55
Ben Regenspan

Wenn Sie die Notizen von Ben erweitern, sollte dies dahin 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 ewig gebraucht, um das herauszufinden. Riesiger Dank an Ben! Vielen Dank!

4
Liam McArthur

Ben hat dir die Hälfte der Antwort gegeben. Wenn Sie den Marker erkannt haben, klicken Sie auf ein Ereignis, und Sie müssen den Marker "ausblenden" oder von der Karte entfernen. Die Standardmethode, um dies mit Google Maps zu tun, ist folgende:

this.setMap(null);

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

3
chuck w

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

1
charlietfl

Sie können eine Markierung anzeigen, indem Sie die Sichtbarkeit true festlegen, und sie ausblenden, indem Sie die Sichtbarkeit false festlegen.

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

Ich bin nicht sicher, ob Sie die Markierung einfach ausblenden können. Der geeignete Haken für das Ereignis click ist jedoch, wenn Sie marker so etwas wie dies tun.

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 versuchst du die Markierungen zu verbergen? Müssen Sie die Markierung erneut zeigen können? Wie wollen Sie das erreichen?

0
Anthony Shaw