blocks|key|1394269|text|从这个链接http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1394270|Teo:最简单的方法就是只有一个InfoWindow对象的实例，您可以一次又一次地重复使用它。这样，当您单击新的标记时，infoWindow将从当前的位置“移动”到指向新的标记。
使用其setContent方法以正确的内容加载它。|blockquote|1394271|entityMap|0|LINK|mutability|MUTABLE|url|http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/^0|5|1T|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@$A|P|B|Q|1|R]]|C|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|C|$]]|$1|G|3|-4|5|6|7|T|8|@]|9|@]|C|$]]]|H|$I|$5|J|K|L|C|$M|N]]]]

From this link <a href="http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/" rel="noreferrer">http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/</a>:

<blockquote>
 Teo: The easiest way to do this is to
 just have one instance of the
 InfoWindow object that you reuse over
 and over again. That way when you
 click a new marker the infoWindow is
 “moved” from where it’s currently at,
 to point at the new marker.
 
 Use its setContent method to load it
 with the correct content.
</blockquote>

blocks|key|1228068|text|有一个关闭()函数用于InfoWindows。只需跟踪上次打开的窗口，并在创建新窗口时调用关闭函数即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1228069|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/apis/maps/documentation/v3/reference.html#InfoWindow^0|3|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is a <a href="http://code.google.com/apis/maps/documentation/v3/reference.html#InfoWindow" rel="nofollow noreferrer">close()</a> function for InfoWindows. Just keep track of the last opened window, and call the close function on it when a new window is created.

blocks|key|1394315|text|//assuming+you+have+a+map+called+'map'
var+infowindow+=+new+google.maps.InfoWindow();

var+latlng1+=+new+google.maps.LatLng(0,0);
var+marker1+=+new+google.maps.Marker({position:latlng1,+map:map});
google.maps.event.addListener(marker1,+'click',
++++function(){
++++++++infowindow.close();//hide+the+infowindow
++++++++infowindow.setContent('Marker+#1');//update+the+content+for+this+marker
++++++++infowindow.open(map,+marker1);//"move"+the+info+window+to+the+clicked+marker+and+open+it
++++}
);
var+latlng2+=+new+google.maps.LatLng(10,10);
var+marker2+=+new+google.maps.Marker({position:latlng2,+map:map});
google.maps.event.addListener(marker2,+'click',
++++function(){
++++++++infowindow.close();//hide+the+infowindow
++++++++infowindow.setContent('Marker+#2');//update+the+content+for+this+marker
++++++++infowindow.open(map,+marker2);//"move"+the+info+window+to+the+clicked+marker+and+open+it
++++}
);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1394316|这将“移动”信息窗口到每一个点击标记，实际上关闭自己，然后重新打开(和平移以适应视窗)在其新的位置。它在打开前改变其内容，以达到预期效果。适用于n个标记。|unstyled|1394317|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
 function(){
 infowindow.close();//hide the infowindow
 infowindow.setContent('Marker #1');//update the content for this marker
 infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
 }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
 function(){
 infowindow.close();//hide the infowindow
 infowindow.setContent('Marker #2');//update the content for this marker
 infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
 }
);
</code></pre>

This will "move" the info window around to each clicked marker, in effect closing itself, then reopening (and panning to fit the viewport) in its new location. It changes its contents before opening to give the desired effect. Works for n markers.

blocks|key|1394335|text|var+map;
var+infowindow;
...
function+createMarker(...)+{
++++var+marker+=+new+google.maps.Marker({...});
++++google.maps.event.addListener(marker,+'click',+function()+{
++++++++...
++++++++if+(infowindow)+{
++++++++++++infowindow.close();
++++++++};
++++++++infowindow+=+new+google.maps.InfoWindow({
++++++++++++content:+contentString,
++++++++++++maxWidth:+300
++++++++});
++++++++infowindow.open(map,+marker);
++++}
...
function+initialize()+{
++++...
++++map+=+new+google.maps.Map(document.getElementById("map_canvas"),+myOptions);
++++...
++++google.maps.event.addListener(map,+'click',+function(event)+{
++++++++if+(infowindow)+{
++++++++++++infowindow.close();
++++++++};
++++++++...
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1394336|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var map;
var infowindow;
...
function createMarker(...) {
 var marker = new google.maps.Marker({...});
 google.maps.event.addListener(marker, 'click', function() {
 ...
 if (infowindow) {
 infowindow.close();
 };
 infowindow = new google.maps.InfoWindow({
 content: contentString,
 maxWidth: 300
 });
 infowindow.open(map, marker);
 }
...
function initialize() {
 ...
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 ...
 google.maps.event.addListener(map, 'click', function(event) {
 if (infowindow) {
 infowindow.close();
 };
 ...
 }
}
</code></pre>

blocks|key|2918204|text|使用多个infowindow的替代解决方案:保存prev在变量中打开infowindow，然后在新窗口打开时关闭它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2918205|var+prev_infowindow+=false;+
...
base.attachInfo+=+function(marker,+i){
++++var+infowindow+=+new+google.maps.InfoWindow({
++++++++content:+'yourmarkerinfocontent'
++++});

++++google.maps.event.addListener(marker,+'click',+function(){
++++++++if(+prev_infowindow+)+{
+++++++++++prev_infowindow.close();
++++++++}

++++++++prev_infowindow+=+infowindow;
++++++++infowindow.open(base.map,+marker);
++++});
}|code-block|syntax|javascript|2918206|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

alternative solution for this with using many infowindows:
save prev opened infowindow in a variable and then close it when new window opened

<pre><code>var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
 var infowindow = new google.maps.InfoWindow({
 content: 'yourmarkerinfocontent'
 });

 google.maps.event.addListener(marker, 'click', function(){
 if( prev_infowindow ) {
 prev_infowindow.close();
 }

 prev_infowindow = infowindow;
 infowindow.open(base.map, marker);
 });
}
</code></pre>

blocks|key|1226642|text|除了使用close()函数之外，还有一种更简单的方法。如果使用InfoWindow属性创建变量，则在打开另一个变量时它会自动关闭。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226643|var+info_window;
var+map;
var+chicago+=+new+google.maps.LatLng(33.84659,+-84.35686);

function+initialize()+{
++++var+mapOptions+=+{
++++++++center:+chicago,
++++++++zoom:+14,
++++++++mapTypeId:+google.maps.MapTypeId.ROADMAP
++++};
++++map+=+new+google.maps.Map(document.getElementById("map_canvas"),+mapOptions);

++++info_window+=+new+google.maps.InfoWindow({
++++++++content:+'loading'
++++)};

createLocationOnMap('Location+Name+1',+new+google.maps.LatLng(33.84659,+-84.35686),+'Location+Name+1 Address+1');
createLocationOnMap('Location+Name+2',+new+google.maps.LatLng(33.84625,+-84.36212),+'Location+Name+1 Address+2');

}

function+createLocationOnMap(titulo,+posicao,+conteudo)+{++++++++++++
++++var+m+=+new+google.maps.Marker({
++++++++map:+map,
++++++++animation:+google.maps.Animation.DROP,
++++++++title:+titulo,
++++++++position:+posicao,
++++++++html:+conteudo
++++});++++++++++++

++++google.maps.event.addListener(m,+'click',+function+()+{++++++++++++++++
++++++++info_window.setContent(this.html);
++++++++info_window.open(map,+this);
++++});
}|code-block|syntax|javascript|1226644|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There is a easier way besides using the close() function. if you create a variable with the InfoWindow property it closes automatically when you open another. 

<pre><code>var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
 var mapOptions = {
 center: chicago,
 zoom: 14,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

 info_window = new google.maps.InfoWindow({
 content: 'loading'
 )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '&lt;p&gt;&lt;strong&gt;Location Name 1&lt;/strong&gt;&lt;br/&gt;Address 1&lt;/p&gt;');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '&lt;p&gt;&lt;strong&gt;Location Name 1&lt;/strong&gt;&lt;br/&gt;Address 2&lt;/p&gt;');

}

function createLocationOnMap(titulo, posicao, conteudo) { 
 var m = new google.maps.Marker({
 map: map,
 animation: google.maps.Animation.DROP,
 title: titulo,
 position: posicao,
 html: conteudo
 }); 

 google.maps.event.addListener(m, 'click', function () { 
 info_window.setContent(this.html);
 info_window.open(map, this);
 });
}
</code></pre>

blocks|key|1228116|text|不如-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1228117|google.maps.event.addListener(yourMarker,+'mouseover',+function+()+{
++++++++yourInfoWindow.open(yourMap,+yourMarker);

++++});

google.maps.event.addListener(yourMarker,+'mouseout',+function+()+{
++++++++yourInfoWindow.open(yourMap,+yourMarker);

++++});|code-block|syntax|javascript|1228118|然后你就可以在它上面盘旋，它就会关闭自己。|1228119|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

How about - 

<pre><code>google.maps.event.addListener(yourMarker, 'mouseover', function () {
 yourInfoWindow.open(yourMap, yourMarker);

 });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
 yourInfoWindow.open(yourMap, yourMarker);

 });
</code></pre>

Then you can just hover over it and it will close itself.

blocks|key|1226654|text|我在顶部存储了一个变量，以跟踪当前打开的信息窗口，请参见下面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226655|var+currentInfoWin+=+null;
google.maps.event.addListener(markers[counter],+'click',+function()+{++++++
++++if+(currentInfoWin+!==+null)+{
++++++++currentInfoWin.close(map,+this);+
++++}
++++this.infoWin.open(map,+this);+
++++currentInfoWin+=+this.infoWin;++
});+|code-block|syntax|javascript|1226656|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I stored a variable at the top to keep track of which info window is currently open, see below.

<pre><code>var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() { 
 if (currentInfoWin !== null) {
 currentInfoWin.close(map, this); 
 }
 this.infoWin.open(map, this); 
 currentInfoWin = this.infoWin; 
}); 
</code></pre>

blocks|key|2918241|text|我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2918242|var+map;
var+infowindow+=+new+google.maps.InfoWindow();
...
function+createMarker(...)+{
var+marker+=+new+google.maps.Marker({
+++++...,
+++++descrip:+infowindowHtmlContent++
});
google.maps.event.addListener(marker,+'click',+function()+{
++++infowindow.setOptions({
++++++++content:+this.descrip,
++++++++maxWidth:300
++++});
++++infowindow.open(map,+marker);
});|code-block|syntax|javascript|2918243|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My solution.

<pre><code>var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
 ...,
 descrip: infowindowHtmlContent 
});
google.maps.event.addListener(marker, 'click', function() {
 infowindow.setOptions({
 content: this.descrip,
 maxWidth:300
 });
 infowindow.open(map, marker);
});
</code></pre>

blocks|key|1394415|text|var+contentString+=+"Location:+"+%2B+results[1].formatted_address;++++
google.maps.event.addListener(marker,'click',+(function(){+
++++infowindow.close();
++++infowindow+=+new+google.maps.InfoWindow({
++++++++content:+contentString
++++});
++++infowindow.open(map,+marker);
}));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1394416|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var contentString = "Location: " + results[1].formatted_address; 
google.maps.event.addListener(marker,'click', (function(){ 
 infowindow.close();
 infowindow = new google.maps.InfoWindow({
 content: contentString
 });
 infowindow.open(map, marker);
}));
</code></pre>

blocks|key|1394428|text|为活动窗口声明变量|type|blockquote|depth|inlineStyleRanges|entityRanges|data|1394429|var+activeInfoWindow;+|code-block|syntax|javascript|1394430|并将此代码绑定到标记侦听器中。|1394431|+marker.addListener('click',+function+()+{
++++if+(activeInfoWindow)+{+activeInfoWindow.close();}
++++infowindow.open(map,+marker);
++++activeInfoWindow+=+infowindow;
});|1394432|unstyled|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|L|7|R|8|@]|9|@]|A|$]]]|M|$]]

<blockquote>
 Declare a variable for active window
</blockquote>

<pre><code>var activeInfoWindow; 
</code></pre>

<blockquote>
 and bind this code in marker listener
</blockquote>

<pre><code> marker.addListener('click', function () {
 if (activeInfoWindow) { activeInfoWindow.close();}
 infowindow.open(map, marker);
 activeInfoWindow = infowindow;
});
</code></pre>

blocks|key|2918269|text|如果您在for循环中使用多个标记，下面是我使用的内容(这里是Django)。您可以在每个标记上设置索引，并在每次打开窗口时设置该索引。关闭以前保存的索引：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2918270|markers+=+Array();
infoWindows+=+Array();
var+prev_infowindow+=false;
{%25+for+obj+in+objects+%25}
var+contentString+=+'your+content'
var+infowindow+=+new+google.maps.InfoWindow({
++++++++++++content:+contentString,
++++++++++});
var+marker+=+new+google.maps.Marker({
+++++++++++++++position:+{lat:+{{+obj.lat+}},+lng:+{{+obj.lon+}}},
+++++++++++++++map:+map,
+++++++++++++++title:+'{{+obj.name+}}',
+++++++++++++++infoWindowIndex+:+{{+forloop.counter0+}}
++++++++++});
google.maps.event.addListener(marker,+'click',
++++++++++++function(event)
++++++++++++{
+++++++++++if(+prev_infowindow+)+{
+++++++++++++++infoWindows[prev_infowindow].close();
++++++++++++++++}
++++++++++++++++prev_infowindow+=+this.infoWindowIndex;
++++++++++++++++infoWindows[this.infoWindowIndex].open(map,+this);
++++++++++++}
++++++++);

++++++++infoWindows.push(infowindow);
++++++++markers.push(marker);

++++++{%25+endfor+%25}|code-block|syntax|javascript|2918271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is what I used if you are using many markers in a for loop (Django here). You can set an index on each marker and set that index every time you open a window. Closing the previously saved index:

<pre><code>markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
 content: contentString,
 });
var marker = new google.maps.Marker({
 position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
 map: map,
 title: '{{ obj.name }}',
 infoWindowIndex : {{ forloop.counter0 }}
 });
google.maps.event.addListener(marker, 'click',
 function(event)
 {
 if( prev_infowindow ) {
 infoWindows[prev_infowindow].close();
 }
 prev_infowindow = this.infoWindowIndex;
 infoWindows[this.infoWindowIndex].open(map, this);
 }
 );

 infoWindows.push(infowindow);
 markers.push(marker);

 {% endfor %}
</code></pre>

<a href="http://www.uptownelite.com/test.html?city=dallas,tx" rel="noreferrer">On my site</a>, I'm using Google Maps API v3 to place house markers on the map.

The InfoWindows stay open unless you explicitly click the close icon. Meaning, you can have 2+ InfoWindows open at a time if you hover over the map marker.

Question: How do I make it so that only the current active InfoWindow is open and all other InfoWindows are closed? Meaning, no more than 1 InfoWindow will be open at a time?

Google Maps: Auto close open InfoWindows?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

，我正在使用Google v3在地图上放置房屋标记。除非显式单击关闭图标，否则InfoWindows将保持打开状态。这意味着，如果您在地图标记上悬停，可以一次打开2+ InfoWindows。问题：如何使其只打开当前活动的InfoWindow，关闭所有其他InfoWindows？意思是，一次只打开一个InfoWindo...

问谷歌地图:自动关闭打开InfoWindows？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图:自动关闭打开InfoWindows？EN