javascript Google Maps API v3：单击 DOM 元素时关闭信息窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3432486/
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
Google Maps API v3: Close infowindow when DOM element is clicked
提问by Landitus
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
我第一次玩谷歌地图，所以我在 CSS Tricks 上看了一个很好的教程：http: //css-tricks.com/google-maps-slider/我更喜欢使用 jQuery 而不是纯 JS ，本教程提供了一种在列表中单击地点以在地图中显示标记的好方法。
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
我喜欢这种方式，但我需要将信息窗口添加到标记中。我做到了，但是当我单击列表中的一个地方并且地图平移时，信息窗口保持打开状态！我认为这是因为我需要将 infowindow.close() 附加到点击“#locations li”的事件。
Here's my code, which runs on document.ready:
这是我的代码，它在 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 = '<p>'+$el.find("h3").html()+'</p>';
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);
});
回答by Daniel Vassallo
It looks like you're creating a new InfoWindowfor each marker. Quoting from the Google Maps API Docs:
看起来您正在InfoWindow为每个标记创建一个新标记。引自 Google Maps API Docs：
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
如果您只想一次显示一个信息窗口（就像 Google 地图上的行为一样），您只需要创建一个信息窗口，您可以根据地图事件（例如用户点击）将其重新分配到不同的位置或标记。
Therefore, you may simply want to create one InfoWindowobject just after you initialize your map, and then handle the clickevent handler as follows:
因此，您可能InfoWindow只想在初始化地图后创建一个对象，然后click按如下方式处理事件处理程序：
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindowshould automatically close when you click on a new marker without having to call the close()method.
然后，InfoWindow当您单击新标记时，它应该会自动关闭，而无需调用该close()方法。
