Question

您好，这可能是一个非常愚蠢的问题，但我正试图让标记消失他们被点击了。标记位于地图上，但是当我点击它时，它没有做任何事情。我想知道它为什么不起作用。谢谢！

  <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>

Answer 1

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 - Events

Answer 2

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

我花了很多时间试图解决这个问题。 Ben的巨额功劳！谢谢！

Answer 3

Ben为你提供了一半的答案。一旦您能够检测到标记点击事件，您需要“隐藏”或从地图中删除标记。使用谷歌地图执行此操作的标准方法是：

this.setMap(null);

然后，您可以再次使用setMap显示地图，以指定地图对象而不是null。

Answer 4

marker是Google地图对象，而不是DOM元素。 Jquery适用于DOM元素。

Answer 5

我不确定你是否可以隐藏标记，但是当你声明marker

时，点击事件的相应钩子会做这样的事情。

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

您可能必须从地图中删除标记而不是“隐藏”它。

你想要隐藏标记是为了什么？你必须能够重新标记标记吗？你打算如何做到这一点？

Answer 6

您可以通过设置可见性true来显示标记，并通过设置可见性false来隐藏标记

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

如何使用jQuery隐藏Google Maps Api Markers

6 个答案: