如何使用 jQuery 隐藏 Google Maps Api 标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9594130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide Google Maps Api Markers with jQuery
提问by wayfare
Hello this might be really silly question but I am trying to make markers disappear when they are clicked. The marker is located properly on the map but when I click it, it doesn't do anything. I was wondering why its not working. Thank you!
你好，这可能是一个非常愚蠢的问题，但我试图让标记在被点击时消失。标记位于地图上的正确位置，但是当我单击它时，它什么也没做。我想知道为什么它不起作用。谢谢！
<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>
回答by Ben Regenspan
temp_markeris a Javascript object, not a DOM element. To attach a listener to the marker (the API will handle the specifics of which DOM element to attach to and how), you should use the Google Maps API's own events system like:
temp_marker是一个 Javascript 对象，而不是一个 DOM 元素。要将侦听器附加到标记（API 将处理要附加到哪个 DOM 元素以及如何附加的细节），您应该使用 Google Maps API 自己的事件系统，例如：
google.maps.event.addListener(marker, 'click', function() {
marker.setVisible(false); // maps API hide call
});
Their documentation: Google Maps Javascript API v3 - Events
回答by Liam McArthur
Expanding on Ben's notes, this should go where you have declared your marker - for example:
扩展 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
});
}
It's taken me ages trying to figure this out. Huge credit to Ben! Thanks!
我花了很长时间才弄清楚这一点。Ben 的巨大功劳！谢谢！
回答by chuck w
Ben provided you with half the answer. Once you are able to detect the marker click event you need to "hide" or remove the marker from the map. The standard way for doing this with google maps is to do this:
本为您提供了一半的答案。一旦您能够检测到标记点击事件，您就需要“隐藏”或从地图中移除标记。使用谷歌地图执行此操作的标准方法是：
this.setMap(null);
You can then show the map again be using setMap to assign your map object instead of null.
然后您可以再次显示地图，使用 setMap 来分配您的地图对象而不是 null。
回答by charlietfl
markeris a google maps object, not a DOM element. Jquery works on DOM elements.
marker是一个谷歌地图对象，而不是一个 DOM 元素。Jquery 适用于 DOM 元素。
回答by Amir Md Amiruzzaman
You can show a marker by setting the visibility trueand hide it by setting the visibility false
您可以通过设置可见性来显示标记，true并通过设置可见性来隐藏它false
marker.setVisible(false); // hide the marker
回答by Anthony Shaw
I'm not sure that you can just hide the marker, but the appropriate hook for the click event would be to do something like this when you declare marker
我不确定您是否可以只隐藏标记，但是当您声明时，单击事件的适当挂钩将执行类似的操作 marker
google.maps.event.addListener(marker, 'click', function() {
// do your hide here
});
You may have to remove the marker from the map rather than "hiding" it.
您可能需要从地图上移除标记而不是“隐藏”它。
What are you trying to hide the markers for? Do you have to be able to reshow the marker? How do you plan to accomplish this?
你想隐藏标记做什么？您必须能够重新显示标记吗？您打算如何实现这一目标？
