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

Question

我已经尝试了一些我在StackOverflow上找到的东西，而且我对此没有任何好运。我的Javascript非常生疏，所以如果这件作品非常简单，我不会感到惊讶。

我正在为一个网站构建一个Google Map系统，并且我正在使用infoBox系统，以便我可以更好地控制弹出窗口的视觉样式。我的问题是我只想在任何给定时刻打开一个infoBox。所以只要点击1个标记，前面的infoBox应该关闭。我知道最好的方法是跟踪最后一个要打开的东西，但是使用循环来构建所有东西，我不确定如何获取特定信息框的实例名称以使用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

我还没有使用InfoBox。我更熟悉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); 
    ... 

查看here了解更多信息...

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

的