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

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

jquery google-maps google-maps-api-3

如何使用jQuery隐藏Google Maps Api标记,jquery,google-maps,google-maps-api-3,Jquery,Google Maps,Google Maps Api 3,您好，这可能是一个很愚蠢的问题，但我试图让标记消失时它们被点击。该标记在地图上的位置正确，但当我单击它时，它不正确做任何事。我想知道为什么它不起作用。谢谢大家! <script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var myOptions = {

您好，这可能是一个很愚蠢的问题，但我试图让标记消失时它们被点击。该标记在地图上的位置正确，但当我单击它时，它不正确做任何事。我想知道为什么它不起作用。谢谢大家!

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


$（文档）.ready（函数（）{
变量myOptions={
中心：新google.maps.LatLng（40.1，-88.2），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var mylatng=newgoogle.maps.LatLng（40.1，-88.2）；
var temp_marker=新的google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好，世界！”
});
console.log（$（临时标记））；
控制台日志（临时标记）；
//临时标记。单击（函数（）{$（this.hide（）；}）；
$（临时标记）。单击（函数（）{console.log（“单击正在工作”）；$（this.hide（）；}）；
});

temp_标记

是一个Javascript对象，而不是DOM元素。要将侦听器附加到标记（API将处理要附加到哪个DOM元素以及如何附加的细节），您应该使用Google Maps API自己的事件系统，如：

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

他们的文档：

标记

是谷歌地图对象，而不是DOM元素。Jquery在DOM元素上工作

我不确定您是否可以隐藏标记，但是单击事件的适当挂钩是在声明

marker

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

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

你想把标记藏起来干什么？你必须能够重新显示标记吗？你打算如何完成这项任务？

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

this.setMap(null);

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

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

我花了好长时间才弄明白。本功不可没！谢谢

通过设置可见性

true

可以显示标记，通过设置可见性

false

可以隐藏标记

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

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