Question

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

我正在为网站构建Google Map系统，我正在使用infoBox系统，以便我可以更好地控制弹出窗口的视觉样式。我的问题是我只想在任何给定时刻打开一个infoBox。因此，只要单击1个标记，前一个infoBox就会关闭。我知道最好的方法是跟踪最后一个要打开的内容，但是使用循环来构建所有内容，我不知道如何获取特定infoBox的实例名称以使用close（）函数。 / p>

这是我的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更熟悉，但我相信它们非常相似。

看起来您正在每个标记点击侦听器中创建一个新的InfoBox：

var descriptionBox;
descriptionBox = new InfoBox();

相反，在Click侦听器外声明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();
  }
}

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

2 个答案: