在 GoogleMapsAPI v3中关闭所有 inowindows

我正忙于一个脚本，将使我的网站上的谷歌地图画布，与多个标记。我想当你点击一个标记，一个信息窗口打开。我已经这么做了，现在的代码是:

 var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function addMarker(map, address, title) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:title
});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<strong>'+title + '</strong><br />' + address);
infowindow.open(map, marker);


});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
addMarker(map, 'Address', 'Title');
addMarker(map, 'Address', 'Title');

百分百有效。但是现在我想要的是，当一个 inowwindow 打开，你想要打开第二个，第一个会自动关闭。但我还没找到办法。Close () ; 不会有帮助。有人能举个例子或者解决这个问题吗？

118513 次浏览
小开
最佳答案

Inowwindow 是局部变量，在 close ()时窗口不可用

var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;


...


google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow();
...
});
...
小开

声明全局变量:

var mapOptions;
var map;
var infowindow;
var marker;
var contentString;
var image;

在 intialize中使用地图的 addEvent方法:

google.maps.event.addListener(map, 'click', function() {
if (infowindow) {
infowindow.close();
}
});
小开

我有一个动态循环，创建 infowindows和标记的基础上有多少输入到内容管理系统，所以我不想创建一个新的 InfoWindow()的每个事件点击和陷入困境的请求，如果有出现过。相反，我试图知道每个实例的特定 infowindow变量将超出我所设置的位置数量，然后提示 Maps 在打开正确的位置之前关闭所有这些位置。

我的位置数组被称为位置，所以我设置 在此之前的 PHP 实际的地图初始化得到我的 infowindow变量名是:

for($k = 0; $k < count($locations); $k++) {
$infowindows[] = 'infowindow' . $k;
}

在初始化 map 之后，在脚本中，我用一个 PHP foreach循环使用计数器创建动态信息窗口:

//...javascript map initilization
<?php
$i=0;
foreach($locations as $location) {


..//get latitudes, longitude, image, etc...


echo 'var mapMarker' . $i . ' = new google.maps.Marker({
position: myLatLng' . $i . ',
map: map,
icon: image
});';


echo 'var contentString' . $i . ' = "<h1>' . $title[$i] . '</h1><h2>' . $address[$i] . '</h2>' . $content[$i] .         '";';
echo 'infowindow' . $i . ' = new google.maps.InfoWindow({ ';
echo '    content: contentString' . $i . '
});';


echo 'google.maps.event.addListener(mapMarker' . $i . ', "click", function() { ';
foreach($infowindows as $window) {
echo $window . '.close();';
}
echo 'infowindow' . $i . '.open(map,mapMarker'. $i . ');
});';


$i++;
}
?>
...//continue with Maps script...

所以，重点是，在我调用整个 map 脚本之前，我有一个数组，其中包含了在创建 InfoWindow()时将要输出的名称，比如 infowindow0, infowindow1, infowindow2, etc...

然后，在每个标记的 click事件上，foreach循环通过并说在下一步打开它们之前关闭它们。结果是这样的:

google.maps.event.addListener(mapMarker0, "click", function() {
infowindow0.close();
infowindow1.close();
infowindow2.close();
infowindow0.open(map,mapMarker0);
}

我想这是另一种做事方式，但我希望能帮到别人。

小开

对于动态创建 infowindows的循环，声明一个 全局变量

var openwindow;

然后在 addListener函数调用中(在循环中) :

google.maps.event.addListener(marker<?php echo $id; ?>, 'click', function() {
if(openwindow){
eval(openwindow).close();
}
openwindow="myInfoWindow<?php echo $id; ?>";
myInfoWindow<?php echo $id; ?>.open(map, marker<?php echo $id; ?>);
});
小开

我有如下的东西

function initMap()
{
//...create new map here
var infowindow;
$('.business').each(function(el){
//...get lat/lng
var position = new google.maps.LatLng(lat, lng);
var content = "contents go here";
var title = "titleText";
var openWindowFn;
var closure = function(content, position){.
openWindowFn = function()
{
if (infowindow)
{
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
position:position,
content:content
});
infowindow.open(map, marker);
}
}(content, position);
var marker = new google.maps.Marker({
position:position,
map:map,
title:title.
});
google.maps.event.addListener(marker, 'click', openWindowFn);
}
}

根据我的理解，使用这样的闭包允许在函数声明时捕获变量及其值，而不是依赖于全局变量。因此，当稍后调用 openWindowFn时，例如在第一个标记上，content和 position变量的值与在 each()函数的第一次迭代中的值相同。

我不是很确定 openWindowFn在它的范围内是如何有 infowindow的。我也不确定我做的事情是否正确，但它确实有效，即使在一个页面上有多个地图(每个地图有一个打开的信息窗口)。

如果有人有任何见解，请评论。

小开

我鼓励您在使用谷歌地图时尝试使用 GoMap jQuery 插件。对于这种情况，您可以在创建标记时将 hide ByClick 设置为 true:

$(function() {
$("#map").goMap({
markers: [{
latitude: 56.948813,
longitude: 24.704004,
html: {
content: 'Click to marker',
popup:true
}
},{
latitude: 54.948813,
longitude: 21.704004,
html: 'Hello!'
}],
hideByClick: true
});
});

这只是一个例子，它有许多功能提供像分组标记和操作信息窗口。

小开

你应该点击你的地图 -$('#map-selector').click();

小开

在处理标记群时，这个方法对我很有效。

var infowindow = null;


google.maps.event.addListener(marker, "click", function () {


if (infowindow) {
infowindow.close();
}
var markerMap = this.getMap();
infowindow = this.info;
this.info.open(markerMap, this);




});
小开

我已经头痛了一个小时试图关闭信息窗口！ 我的最后一个(正在运行的)选项是使用 SetTimeout (几秒钟)关闭 infoWindow 这不是最好的办法... 但是很容易

    marker.addListener('click', function() {
infowindow.setContent(html);
infowindow.open(map, this);


setTimeout(function(){
infowindow.close();
},5000);


});
小开

我有一个代码样本，也许能帮上忙。我只在全局范围内设置了一个 inowindow 对象。然后使用 setContent ()在显示内容之前对其进行设置。

  let map;
let infowindow;
let dataArr = [
{
pos:{lat: -34.397, lng: 150.644},
content: 'First marker'
},
{
pos:{lat: -34.340, lng: 150.415},
content: 'Second marker'
}
];


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
// Set infowindow object to global varible
infowindow = new google.maps.InfoWindow();
loadMarker();
}


function loadMarker(){
dataArr.forEach((obj, i)=>{
let marker = new google.maps.Marker({
position: obj.pos,
map: map
});
marker.addListener('click', function() {
infowindow.close()
infowindow.setContent(`<div> ${obj.content} </div>`)
infowindow.open(map, marker);
});
})
}
小开

在脚本标记开始后写下这一行。

previous_Window=null;

它将工作100% 。通过使用这个代码

 radius= circle.getRadius()/1000;
radius_mile= circle.getRadius()/1609.344;


newRadious = 'This Circle Radius Covers Approx ' + radius.toFixed(1) + ' Km'+' <br> This circle Radius Covers Approx '+ radius_mile.toFixed(1)+ 'Miles';
var infoWindow= new google.maps.InfoWindow({
content: newRadious
});
infoWindow.setContent(newRadious)
infoWindow.setPosition(circle.getCenter());
if (previous_Window)
previous_Window.close();


infoWindow.open(map);
previous_Window=infoWindow;
小开

如果您有多个标记，您可以使用这个简单的解决方案来关闭以前打开的标记时，单击一个新的标记:

var infowindow = new google.maps.InfoWindow({
maxWidth: (window.innerWidth - 160),
content: content
});


marker.infowindow = infowindow;
var openInfoWindow = '';


marker.addListener('click', function (map, marker) {
if (openInfoWindow) {
openInfoWindow.close();
}
openInfoWindow = this.infowindow;
this.infowindow.open(map, this);
});

提交答案