Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API v3~只需关闭一个信息窗口？

Javascript 谷歌地图API v3~只需关闭一个信息窗口？

javascript google-maps google-maps-api-3

Javascript 谷歌地图API v3~只需关闭一个信息窗口？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,试图简单地关闭一个信息窗口 我已经有了一系列的标记，所以像这样的东西会很好。谢谢 MyMarkers[i].infowindow.close(); 使用，您可以使用该方法轻松地关闭信息窗口。您只需保留对正在使用的InfoWindow对象的引用。考虑下面的例子，它打开了信息框并在5秒后关闭： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/ht

试图简单地关闭一个信息窗口

我已经有了一系列的标记，所以像这样的东西会很好。谢谢

MyMarkers[i].infowindow.close();
使用，您可以使用该方法轻松地关闭
信息窗口
。您只需保留对正在使用的
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>
然后您可以按如下方式打开和关闭
InfoWindow
：

marker.infowindow.open(map, marker);
marker.infowindow.close();
如果您有一组标记，同样适用：

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();
也可以共享/重用同一个infoWindow对象。 请参阅此google以供参考

与演示中的代码相同

var-Demo={map:null，infoWindow:null
};
/**
*单击地图上的任意位置并关闭“信息”窗口时调用。
*/
Demo.closeInfoWindow=函数（）{
Demo.infoWindow.close（）；
};
/**
*打开“共享信息”窗口，将其定位到指定的标记，然后
*将标记的位置显示为其内容。
*/
Demo.openInfoWindow=函数（标记）{
var markerLatLng=marker.getPosition（）；
Demo.infoWindow.setContent([
“标记位置为：
”，
markerLatLng.lat（），
', ',
markerLatLng.lng（）
].加入（“”）；
Demo.infoWindow.open（Demo.map，marker）；
},
/**
*在初始页面加载时仅调用一次以初始化映射。
*/
Demo.init=函数（）{
//创建Google地图的单个实例。
var centerLatLng=新的google.maps.LatLng（37.789879，-122.390442）；
Demo.map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：13，
中心：中心板条，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//创建要共享的InfoWindow对象的单个实例
//由所有地图对象向用户显示信息。
Demo.infoWindow=新的google.maps.infoWindow（）；
//单击地图上的任意位置时关闭“信息”窗口。
google.maps.event.addListener（Demo.map，'click'，Demo.closeInfoWindow）；
/在旧金山附近的几个随机位置添加多个标记。
//第一随机标记
var marker1=新的google.maps.Marker({
地图：Demo.map，
位置：中心线
});
//将事件侦听器注册到每个标记以打开共享信息
//单击或拖动时显示标记位置的窗口。
google.maps.event.addListener（marker1，'click'，function（）{
openInfoWindow（marker1）；
});
//第二随机标记
var marker2=新的google.maps.Marker({
地图：Demo.map，
位置：新google.maps.LatLng（37.787814，-122.40764），
德拉格布尔：是的
});
//将事件侦听器注册到每个标记以打开共享信息
//单击或拖动时显示标记位置的窗口。
google.maps.event.addListener（marker2，'click'，function（）{
openInfoWindow（marker2）；
});
//第三随机标记
var marker3=新的google.maps.Marker({
地图：Demo.map，
位置：新google.maps.LatLng（37.767568，-122.391665），
德拉格布尔：是的
});
//将事件侦听器注册到每个标记以打开共享信息
//单击或拖动时显示标记位置的窗口。
google.maps.event.addListener（marker3，'click'，function（）{
openInfoWindow（marker3）；
});
}
我也遇到了类似的问题。我只是在代码中添加了以下内容：

closeInfoWindow = function() {
    infoWindow.close();
};

google.maps.event.addListener(map, 'click', closeInfoWindow);
完整的js代码是（上面的代码距离底部大约15行）：

将关闭打开的信息窗口。
它的工作原理与

相同，您只需在创建信息窗口的函数中的地图上添加一个单击侦听器即可

google.maps.event.addListener(marker, 'click', function() {
    var infoWindow = createInfoWindowForMarker(marker);
    infoWindow.open(map, marker);
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });
});
这一点也会起作用：

google.maps.event.addListener(marker, 'click', function() {
                if(!marker.open){
                    infowindow.open(map,marker);
                    marker.open = true;
                }
                else{
                    infowindow.close();
                    marker.open = false;
                }
            });
它将在单击时打开一个信息窗口，如果已打开，则在单击时关闭它

同样，在看过Logan的解决方案后，这两种方案可以组合成：

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;
                });
            });
它将在单击时打开一个信息窗口，在单击并打开时关闭它，如果在地图上的任何位置单击并打开信息窗口，则关闭它。

以下事件侦听器为我很好地解决了这一问题，即使使用了多个标记和信息窗口：

//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);
  }
});
我们可以使用infowindow.close（地图）；如果已使用infowindow=new google.maps.infowindow（）初始化信息窗口，则关闭所有信息窗口

哇，金徽章！很多人都看到了这一点。一定有很多人都有同样的问题。和什么一样？你忘了完成你的句子了吗？这段代码好像少了什么。生成的地图显示空的信息窗口。@husayt这是一个非常古老的答案，我相信这项技术在过去3年中已经发生了变化。此外，代码需要为您自己的目的进行配置。OOP genious的出色解释力！；-）谢谢这将为每个/某些/一个标记上附加特殊信息打开一百万扇门。。。随时随地收集或更换。谢谢你的好主意！ 
google.maps.event.addListener(marker, 'click', function() {
    var infoWindow = createInfoWindowForMarker(marker);
    infoWindow.open(map, marker);
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });
});

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(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;
                });
            });

//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);
  }
});