关闭所有打开的谷歌地图信息框

Question

我已经尝试了一些我在StackOverflow上找到的东西，但我对此没有任何运气。我对我的Javascript很生疏，所以如果完成这项工作非常简单，我不会感到惊讶。

我

正在为一个网站构建一个谷歌地图系统，我正在使用信息框系统，以便我可以更好地控制弹出窗口的视觉风格。我的问题是我只想在任何给定时刻打开一个信息框。因此，只要单击 1 个标记，上一个信息框就会关闭。我知道最好的方法是跟踪最后一个打开的内容，但是由于循环用于构建所有内容，我不确定如何获取特定信息框的实例名称以使用 close（） 函数。

这是我的Javascript：

    var map;
    var markers = new Array();
    // This function builds out the Google Map
    function initialize() {
        // Set the center point of the map to be create
        var mapCenter = new google.maps.LatLng(40.0378755, -76.3055144);
        // Create a map object, and include the MapTypeId to add to the map type control.
        // This is where we specify the UI settings for the map.
        var mapOptions = {
            center: mapCenter,
            zoom: 8,
            disableDefaultUI: false,
            panControl: false,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            scaleControlOptions: {position: google.maps.ControlPosition.RIGHT_BOTTOM},
            streetViewControl: false,
            overviewMapControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        // Draw the map on-screen.
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    };
    // This function creates pins for the map.
    var descriptionBox;
    (function () {
      google.maps.Map.prototype.markers = new Array();
      google.maps.Map.prototype.addMarker = function(marker) {
        this.markers[this.markers.length] = marker;
      };
    })();
    //This function builds the locations and information for the markers and infoboxes
    function showOverlays() {
        //Set data for individual marker
        var a = new Array();
            var t =  new Object();
        t.name = "Alert at this Location"
        t.desc = "Here's a brief description."
        t.lat =  40.3178755
        t.lng =  -75.9155144
        t.icon = "low"
        a[0] = t;
//Set data for individual marker
var t =  new Object();
t.name = "Moderate priority Issue Here."
t.desc = "Read this text."
t.lat =  40.4178755
t.lng =  -75.8155144
t.icon = "mid"
a[1] = t;
//Set data for individual marker
var t =  new Object();
t.name = "HIGH PRIORITY!"
t.desc = "This is some text"
t.lat =  40.5178755
t.lng =  -75.4155144
t.icon = "high"
a[2] = t;
//Set data for individual marker
var t =  new Object();
t.name = "Another Mid Alert"
t.desc = "Description would go here. This is a longer description to show how it would be handled."
t.lat =  39.4178755
t.lng =  -77.4155144
t.icon = "mid"
a[3] = t;
//Set data for individual marker
var t =  new Object();
t.name = "ALERT!!! READ ME!"
t.desc = "More Text Here"
t.lat =  40.3178755
t.lng =  -76.3155144
t.icon = "high"
a[4] = t;
//Gather the data for each individual marker, and put the data in a usable format.  
for (var i = 0; i < a.length; i++) {
    var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
    var markerIcon = a[i].icon;
    var heading = a[i].name;
    var description = a[i].desc;
    var infoContent = "<h1>"+heading+"</h1><p>"+description+"</p>";
    map.addMarker(createMarker(a[i].name,latlng,markerIcon,infoContent));
 }
//Builds and places the markers on the map.     
function createMarker(name, latlng, icon, infoContent) {
var marker = new google.maps.Marker({position: latlng, map: map, icon: "images/"+markerIcon+"_icon.png"});
//Create event listener to know when a marker is clicked on.
google.maps.event.addListener(marker, "click", function() {
  var descriptionBox
  descriptionBox = new InfoBox();
  //Settings for the infoBox
  var myOptions = {
            content: infoContent
            ,boxClass: "myInfoBoxStyle"
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(0, 0)
            ,zIndex: null
            ,closeBoxMargin: "2px 2px 2px 2px"
            ,closeBoxURL: "images/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
            };
          //Close any open boxes
          descriptionBox.close();
          //Create new infoBox instance
          descriptionBox = new InfoBox(myOptions);
          //Draw infoBox on the map.
          descriptionBox.open(map, marker);
        });
        return marker;
      };
    };

单击一个按钮调用 showOverlays（）; 函数来显示地图上的标记。

那么我错过了什么？任何帮助将不胜感激。

Answer 1

我没有使用过信息框。我更熟悉InfoWindow，但我相信它们非常相似。

看起来您正在每个标记单击侦听器中创建一个新的信息框：

var descriptionBox;
descriptionBox = new InfoBox();

相反，在点击侦听器外部声明信息框：

var infoBox= new google.maps.InfoBox({ content: 'hello world' });

并在点击侦听器中引用它：

google.maps.event.addListener(marker, "click", function() {
    infoBox.open(map, this);
    ...

更多信息请看这里...

Answer 2

试试这段代码...

var infowindows = new Array();
var popup = new InfoBox({
  // size: new google.maps.Size(420,130),
    content:content_info
   ,pixelOffset: new google.maps.Size(-200, -241)
   ,disableAutoPan: false
   ,closeBoxMargin: "5px 5px 2px 2px"
   ,boxStyle: {opacity: 0.95
              }
});
infowindows.push(popup); //push all infoboxes to an array
google.maps.event.addListener(marker, 'click', function() {
    close_popups();    //close any infobox open
    map.panTo(mycenter1);
    popup.open(map, marker);

    // currentPopup = null;
  });
function close_popups(){
  for(var i = 0; i<infowindows.length; i++){
    infowindows[i].close();
  }
}