谷歌地图关闭infoBox

Question

我需要关闭一个信息框，当另一个打开。我已经看到很多关于这个的线索，并且我已经尝试了我读过的所有内容，但没有运气。

我以为我的问题没有一个信息框的全局变量，但在我做了一个仍然没有运气。但是，如果你点击地图，它会关闭所有的信息框，所以不知道为什么这是可行的，但不是当你点击另一个标记时？

这是我目前的JS：

var infobox; 

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) { 
     //circles for 4sq Trending data 
     var cityCircle, cityCircle2, cityCircle3, infobox, infobox2, infobox3; 

     for (var i = 0; i < mapDataTrending.length; i++) { 
      contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>'; 
      contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address; 
      contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + " ARE HERE"; 

      infobox = new InfoBox({ 
       content: contentString, 
       //content: document.getElementById("infobox"), 
       disableAutoPan: false, 
       maxWidth: 150, 
       pixelOffset: new google.maps.Size(-140, 6), 
       zIndex: null, 
       boxClass: "infoTrending", 
       boxStyle: { 
        width: "200px" 
       }, 
       closeBoxMargin: "1px", 
       closeBoxURL: "img/close-btn.png", 
       infoBoxClearance: new google.maps.Size(1, 1) 
      }); 

      var markerIcon = [ 
          "img/marker-icon-1.png", 
          "img/marker-icon-2.png", 
          "img/marker-icon-3.png", 
          "img/marker-icon-4.png", 
          "img/marker-icon-5.png", 
          "img/marker-icon-6.png", 
          "img/marker-icon-7.png", 
          "img/marker-icon-8.png", 
          "img/marker-icon-9.png", 
          "img/marker-icon-10.png" 
         ]; 

     var image = new google.maps.MarkerImage(
      markerIcon[i], 
      // This marker is 129 pixels wide by 42 pixels tall. 
      new google.maps.Size(18, 18), 
      // The origin for this image is 0,0. 
      new google.maps.Point(0,0), 
      // The anchor for this image is the base of the flagpole at 18,42. 
      new google.maps.Point(9, 9) 
     ); 



      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), 
       anchor: new google.maps.Point(0,32), 
       icon: image, 
       map: map 
      });   


      bindInfoW(marker, contentString, infobox); 

     } 

     function bindInfoW(marker, contentString, infobox){ 
      google.maps.event.addListener(marker, 'click', function() { 

       if(infobox){ 
        infobox.close(); 
       } 

       infobox.setContent(contentString); 
       infobox.open(map, marker); 

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

      }); 
     } 

Answer 1

在mapDataTrending环实例多InfoBox ES相反的，一个实例与全球空content。然后你可以取出当地的infobox变量，处理程序将使用全局引用。

你的脚本最终应该是这样的：

var infobox = new InfoBox({ 
    content: '', 
    disableAutoPan: false, 
    maxWidth: 150, 
    pixelOffset: new google.maps.Size(-140, 6), 
    zIndex: null, 
    boxClass: "infoTrending", 
    boxStyle: { 
     width: "200px" 
    }, 
    closeBoxMargin: "1px", 
    closeBoxURL: "img/close-btn.png", 
    infoBoxClearance: new google.maps.Size(1, 1) 
}); 

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) { 
    //circles for 4sq Trending data 
    var cityCircle, cityCircle2, cityCircle3; 

    for (var i = 0; i < mapDataTrending.length; i++) { 
     contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>'; 
     contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address; 
     contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + " ARE HERE"; 

     var markerIcon = [ 
         "img/marker-icon-1.png", 
         "img/marker-icon-2.png", 
         "img/marker-icon-3.png", 
         "img/marker-icon-4.png", 
         "img/marker-icon-5.png", 
         "img/marker-icon-6.png", 
         "img/marker-icon-7.png", 
         "img/marker-icon-8.png", 
         "img/marker-icon-9.png", 
         "img/marker-icon-10.png" 
        ]; 

    var image = new google.maps.MarkerImage(
     markerIcon[i], 
     // This marker is 129 pixels wide by 42 pixels tall. 
     new google.maps.Size(18, 18), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 18,42. 
     new google.maps.Point(9, 9) 
    ); 


     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), 
      anchor: new google.maps.Point(0,32), 
      icon: image, 
      map: map 
     });   


     bindInfoW(marker, contentString); 

    } 

    function bindInfoW(marker, contentString){ 
     google.maps.event.addListener(marker, 'click', function() { 

      if(infobox){ 
       infobox.close(); 
      } 

      infobox.setContent(contentString); 
      infobox.open(map, marker); 

     }); 
    } 

我也删掉了越来越每次点击绑定的第二click处理程序，因为它是多余的，漏水的，如果你没有那个大家还不任何标记t与bindInfoW绑定。