如何使用 jQuery 隐藏 Google Maps Api 标记答案

【问题标题】：How to hide Google Maps Api Markers with jQuery如何使用 jQuery 隐藏 Google Maps Api 标记
【发布时间】：2012-03-24 13:07:51
【问题描述】：

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

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

【问题讨论】：

标签： jquery google-maps google-maps-api-3

【解决方案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

【讨论】：

这是否意味着我无法将 jQuery 应用于大多数 Google 地图对象？
@wayfare Maps API 在它为标记和实现者创建的 DOM 元素之间放置了一个抽象层。直接访问 DOM 元素可能有技巧，但不支持路径。一旦谷歌地图进行内部更改，任何直接摆弄元素的尝试都会受到破坏；它也可能无法跨浏览器工作。
如果您在标记声明中添加选项 optimize:false 您可以通过 jQuery 访问它，但是当您移动地图、放大或缩小时，API 会将所有配置重置为默认配置，因为其中，最好的方法是使用 setVisible，因为它会保留该配置。
工作正常，干得好:)

【解决方案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
});
}

我花了很长时间才弄清楚这一点。非常感谢本！谢谢！

【讨论】：

【解决方案3】：

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

this.setMap(null);

然后您可以再次显示地图，使用 setMap 来分配您的地图对象而不是 null。

【讨论】：

【解决方案4】：

marker 是一个谷歌地图对象，而不是一个 DOM 元素。 Jquery 适用于 DOM 元素。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

我不确定你是否可以隐藏标记，但是当你声明 marker 时，点击事件的适当钩子是做这样的事情

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

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

你想隐藏标记是为了什么？您必须能够重新显示标记吗？您打算如何实现这一目标？

【讨论】：