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

Question

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

27

大家好，这可能是一个非常愚蠢的问题，但我正在尝试在点击标记时让它们消失。标记在地图上正确显示，但是当我点击它时，它似乎没有任何反应。我想知道为什么它不起作用。谢谢！

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

- wayfare

6个回答

3

在 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! 谢谢!

- Liam McArthur

2

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

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

- Amir Md Amiruzzaman

2

Ben已经提供了答案的一半。一旦您能够检测到标记器单击事件，您需要“隐藏”或从地图中删除标记器。使用Google Maps进行此操作的标准方式是执行以下操作：

this.setMap(null);

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

- chuck w

1

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

- charlietfl

0

我不确定你是否可以仅隐藏标记，但单击事件的适当钩子应该在声明marker时执行类似于这样的操作

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

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

您试图隐藏标记的原因是什么？您是否需要能够重新显示标记？您计划如何实现这一点？

- Anthony Shaw

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Regenspan · Accepted Answer

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