Google Maps API v3：单击DOM元素时关闭信息窗口

我第一次玩谷歌地图，所以我看了一篇关于CSS技巧的精彩教程： http ： //css-tricks.com/google-maps-slider/我喜欢使用jQuery比纯JS更好，本教程提供了一种很好的方法来单击列表中的某个位置以在地图中显示标记。

我喜欢这样，但我需要在标记处添加infowindows。 我做了哪些，但当我点击列表上的某个地方并且地图平移时，信息窗保持打开状态！ 我认为这是因为我需要将infowindow.close（）附加到点击“#locations li”的事件上。

这是我的代码，它在document.ready上运行：

$(function() { var chicago = new google.maps.LatLng(41.924832, -87.697456), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 10, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($("#map_canvas")[0], myOptions); $("#locations li").click(function() { $el = $(this); if (!$el.hasClass("hover")) { $("#locations li").removeClass("hover"); $el.addClass("hover"); if (!first) { // Clear current marker curMarker.setMap(); // Set zoom back to Chicago level // map.setZoom(10); } // Move (pan) map to new location function move(){ pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long")); map.panTo(pointToMoveTo); } move(); // Add new marker curMarker = new google.maps.Marker({ position: pointToMoveTo, map: map }); // Infowindow: contenido var contentString = '
'+$el.find("h3").html()+'
'; contentString += 'hola' ; var infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50), content: contentString }); // On click, zoom map google.maps.event.addListener(curMarker, 'click', function() { //map.setZoom(14); infowindow.open(map,curMarker); }); 

Answer 1

看起来您正在为每个标记创建一个新的InfoWindow 。 从Google Maps API文档引用 ：

如果您只想一次显示一个信息窗口（就像Google地图上的行为一样），您只需要创建一个信息窗口，您可以在地图事件（例如用户点击）上重新分配到不同的位置或标记。

因此，您可能只想在初始化地图后创建一个InfoWindow对象，然后按如下方式处理click事件处理程序：

 google.maps.event.addListener(curMarker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map, curMarker); }); 

然后，当您单击新标记而不必调用close()方法时， InfoWindow应自动关闭。