如何使用 jQuery 隐藏 Google Maps Api 标记
Posted
技术标签:
【中文标题】如何使用 jQuery 隐藏 Google Maps Api 标记【英文标题】：How to hide Google Maps Api Markers with jQuery 【发布时间】：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>
【问题讨论】：
【参考方案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
);
您可能必须从地图上移除标记，而不是“隐藏”它。
你想隐藏标记是为了什么？您必须能够重新显示标记吗？您打算如何实现这一目标？
【讨论】：
以上是关于如何使用 jQuery 隐藏 Google Maps Api 标记的主要内容，如果未能解决你的问题，请参考以下文章