web-dev-qa-db-ja.com

jQueryでGoogle Maps APIマーカーを非表示にする方法

こんにちは、これは本当にばかげた質問かもしれませんが、マーカーをクリックしたときにマーカーが消えるようにしています。マーカーはマップ上に適切に配置されていますが、クリックしても何も実行されません。なぜ機能しないのかと思っていました。ありがとうございました！

  <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>
jquerygoogle-mapsgoogle-maps-api-3
22
wayfare

temp_markerはJavascriptオブジェクトであり、DOM要素ではありません。リスナーをマーカーにアタッチするには（APIがアタッチするDOM要素の詳細と方法を処理します）、次のようなGoogle Maps API独自のイベントシステムを使用する必要があります。

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

ドキュメント： Google Maps Javascript API v3-イベント

58
Ben Regenspan

Benのメモを展開すると、これはマーカーを宣言した場所に移動するはずです-たとえば：

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
});
}

これを理解しようとすると、何年もかかりました。ベンへの多大な信用！ありがとう！

4
Liam McArthur

ベンはあなたに半分の答えを提供しました。マーカークリックイベントを検出できたら、マーカーをマップから「非表示」にするか、削除する必要があります。 Googleマップでこれを行う標準的な方法は、これを行うことです。

this.setMap(null);

その後、nullではなくsetMapを使用してマップオブジェクトを割り当てることにより、マップを再度表示できます。

3
chuck w

markerはGoogleマップオブジェクトであり、DOM要素ではありません。 JqueryはDOM要素で機能します。

1
charlietfl

可視性trueを設定してマーカーを表示し、可視性falseを設定してマーカーを非表示にできます。

marker.setVisible(false); // hide the marker
0
Amir Md Amiruzzaman

マーカーを非表示にできるかどうかはわかりませんが、クリックイベントの適切なフックは、markerを宣言するときにこのようなことをすることです。

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

マーカーを「隠す」のではなく、マップから削除する必要がある場合があります。

何のためにマーカーを隠そうとしていますか？マーカーを再表示できる必要がありますか？これをどのように達成する予定ですか？

0
Anthony Shaw