Javascript Google Map API v3 ~ 只需关闭一个信息窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2946165/
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 Map API v3 ~ Simply Close an infowindow?
提问by Harry
Trying to simply close an infowindow?
试图简单地关闭信息窗口？
I already have an array of markers, so something like this would be good. Thanks
我已经有了一系列标记，所以像这样的东西会很好。谢谢
MyMarkers[i].infowindow.close();
回答by Daniel Vassallo
With the v3 API, you can easily close the InfoWindowwith the InfoWindow.close()method. You simply need to keep a reference to the InfoWindowobject that you are using. Consider the following example, which opens up an InfoWindowand closes it after 5 seconds:
使用v3 API，您可以轻松关闭InfoWindowwithInfoWindow.close()方法。您只需要保留对InfoWindow您正在使用的对象的引用。考虑以下示例，它打开一个InfoWindow并在 5 秒后关闭它：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API InfoWindow Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 500px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(-25.36388, 131.04492),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'An InfoWindow'
});
infowindow.open(map, marker);
setTimeout(function () { infowindow.close(); }, 5000);
</script>
</body>
</html>
If you have a separate InfoWindowobject for each Marker, you may want to consider adding the InfoWindowobject as a property of your Markerobjects:
如果您有一个单独的InfoWindow对象Marker，您可能需要考虑将InfoWindow对象添加为对象的属性Marker：
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
marker.infowindow = new google.maps.InfoWindow({
content: 'An InfoWindow'
});
Then you would be able to open and close that InfoWindowas follows:
然后你就可以打开和关闭它InfoWindow，如下所示：
marker.infowindow.open(map, marker);
marker.infowindow.close();
The same applies if you have an array of markers:
如果您有一组标记，这同样适用：
var markers = [];
marker[0] = new google.maps.Marker({
position: map.getCenter(),
map: map
});
marker[0].infowindow = new google.maps.InfoWindow({
content: 'An InfoWindow'
});
// ...
marker[0].infowindow.open(map, marker);
marker[0].infowindow.close();
回答by Alex Nolasco
Or you can share/reuse the same infoWindow object. See this google demofor reference.
或者您可以共享/重用相同的 infoWindow 对象。请参阅此 google演示以供参考。
Same code from demo
演示中的相同代码
var Demo = { map: null, infoWindow: null
};
/**
* Called when clicking anywhere on the map and closes the info window.
*/
Demo.closeInfoWindow = function() {
Demo.infoWindow.close();
};
/**
* Opens the shared info window, anchors it to the specified marker, and
* displays the marker's position as its content.
*/
Demo.openInfoWindow = function(marker) {
var markerLatLng = marker.getPosition();
Demo.infoWindow.setContent([
'<b>Marker position is:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng()
].join(''));
Demo.infoWindow.open(Demo.map, marker);
},
/**
* Called only once on initial page load to initialize the map.
*/
Demo.init = function() {
// Create single instance of a Google Map.
var centerLatLng = new google.maps.LatLng(37.789879, -122.390442);
Demo.map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: centerLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create a single instance of the InfoWindow object which will be shared
// by all Map objects to display information to the user.
Demo.infoWindow = new google.maps.InfoWindow();
// Make the info window close when clicking anywhere on the map.
google.maps.event.addListener(Demo.map, 'click', Demo.closeInfoWindow);
// Add multiple markers in a few random locations around San Francisco.
// First random marker
var marker1 = new google.maps.Marker({
map: Demo.map,
position: centerLatLng
});
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker1, 'click', function() {
Demo.openInfoWindow(marker1);
});
// Second random marker
var marker2 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(37.787814,-122.40764),
draggable: true
});
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker2, 'click', function() {
Demo.openInfoWindow(marker2);
});
// Third random marker
var marker3 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(37.767568,-122.391665),
draggable: true
});
// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker3, 'click', function() {
Demo.openInfoWindow(marker3);
});
}
回答by kdev
I was having a similar issue. I simply added the following to my code:
我遇到了类似的问题。我只是在我的代码中添加了以下内容：
closeInfoWindow = function() {
infoWindow.close();
};
google.maps.event.addListener(map, 'click', closeInfoWindow);
The full js code is (the code above is about 15 lines from the bottom):
完整的js代码是（上面的代码距底部约15行）：
jQuery(window).load(function() {
if (jQuery("#map_canvas").length > 0){
googlemap();
}
});
function googlemap() {
jQuery('#map_canvas').css({'height': '400px'});
// Create the map
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
// Create the shared infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("div");
var title = document.createElement("div");
var boxText = document.createElement("div");
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-117,-200)
,zIndex: null
,boxStyle: {
background: "url('"+siteRoot+"images/house-icon-flat.png') no-repeat"
,opacity: 1
,width: "236px"
,height: "300px"
}
,closeBoxMargin: "10px 0px 2px 2px"
,closeBoxURL: "http://kdev.langley.com/wp-content/themes/langley/images/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infoWindow = new InfoBox(myOptions);
var MarkerImage = siteRoot+'images/house-web-marker.png';
// Create the markers
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.title,
content: data.html,
icon: MarkerImage
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, this);
title.innerHTML = marker.getTitle();
infoWindow.setContent(marker.content);
infoWindow.open(map, marker);
jQuery(".innerinfo").parent().css({'overflow':'hidden', 'margin-right':'10px'});
});
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var origcent = new google.maps.LatLng(map.getCenter());
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
closeInfoWindow = function() {
infoWindow.close();
};
google.maps.event.addListener(map, 'click', closeInfoWindow);
google.maps.event.addListener(infoWindow, 'closeclick', function()
{
centermap();
});
function centermap()
{
map.setCenter(map.fitBounds(bounds));
}
}
jQuery(window).resize(function() {
googlemap();
});
回答by Mahir Zukic
This one would also work:
这个也可以：
google.maps.event.addListener(marker, 'click', function() {
if(!marker.open){
infowindow.open(map,marker);
marker.open = true;
}
else{
infowindow.close();
marker.open = false;
}
});
Which will open an infoWindow when clicked on it, close it when clicked on it if it was opened.
单击它时将打开一个信息窗口，如果它已打开，则在单击它时关闭它。
Also having seen Logan's solution, these 2 can be combined into this:
也看到了洛根的解决方案，这两个可以组合成这样：
google.maps.event.addListener(marker, 'click', function() {
if(!marker.open){
infowindow.open(map,marker);
marker.open = true;
}
else{
infowindow.close();
marker.open = false;
}
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
marker.open = false;
});
});
Which will open an infoWindow when clicked on it, close it when clicked on it and it was opened, and close it if it's clicked anywhere on the map and the infoWindows was opened.
点击它时会打开一个信息窗口，点击它时关闭它并打开它，如果点击地图上的任何地方并且打开了信息窗口，则关闭它。
回答by Logan
You could simply add a click listener on the map inside the function that creates the InfoWindow
您可以简单地在创建 InfoWindow 的函数内的地图上添加一个单击侦听器
google.maps.event.addListener(marker, 'click', function() {
var infoWindow = createInfoWindowForMarker(marker);
infoWindow.open(map, marker);
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
});
回答by Craig van Tonder
The following event listener solved this nicely for me even when using multiple markers and info windows:
即使使用多个标记和信息窗口，以下事件侦听器也很好地为我解决了这个问题：
//Add click event listener
google.maps.event.addListener(marker, 'click', function() {
// Helper to check if the info window is already open
google.maps.InfoWindow.prototype.isOpen = function(){
var map = infoWindow.getMap();
return (map !== null && typeof map !== "undefined");
}
// Do the check
if (infoWindow.isOpen()){
// Close the info window
infoWindow.close();
} else {
//Set the new content
infoWindow.setContent(contentString);
//Open the infowindow
infoWindow.open(map, marker);
}
});
回答by Naushad
We can use infowindow.close(map); to close all info windows if you already initialize the info window using infowindow = new google.maps.InfoWindow();
我们可以使用 infowindow.close(map); 如果您已经使用 infowindow = new google.maps.InfoWindow() 初始化信息窗口，则关闭所有信息窗口；
回答by Janki
infowindow.open(null,null);
will close opened infowindow. It will work same as
将关闭打开的信息窗口。它的工作原理与
