Question

我一遍又一遍地阅读这个问题并尝试了几种不同的解决方案，现在我认为我已经走错了方向。我打算在点击下一次点击时关闭信息窗口。

JSFiddle将显示点击标记时弹出的信息窗口，但如果您继续点击则会打开几个信息窗口。 https://jsfiddle.net/RaeRae961/dp64cbwv/1/ 这是代码：

＆＃13;

(function init() {
  var dataKey = '1n-q5n4aaIn95SM0OGoZ6yDp0aSk4gfWeh0-yILHqAS8';
  var mapOptions = {
    center: {
      lat: 39.7392,
      lng: -104.9903
    },
    zoom: 11
  };

  var energyStarLogo = "energy_star_logo_small.png"
  var starGreen = "http://www.googlemapsmarkers.com/v1/00FF0D/"
  var starYellow = "http://www.googlemapsmarkers.com/v1/FFF000/"
  var starGrey = "http://www.googlemapsmarkers.com/v1/8A8989/"

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  function content(building) {
    {
      content: building.address1
    }
  };

  function determineIcon(building) {
    if (building.energyStarYears.indexOf('2014')) {
      return energyStarLogo;
    }
    // else if (!building.energyStarYears.indexOf('2014'))
    else {
      return starGreen;
    }
    // else{
    //   return starGrey;
    // }
  };

  function addMarker(building_data) {
    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(building_data.lat, building_data.lng),
      icon: determineIcon(building_data)
    });
    // console.log(building_data);
    var infowindow = new google.maps.InfoWindow({
      content: "<p>" + "<strong>Property Name: </strong>" + building_data.propertyname + "</p>" + "<p>" + "<strong>Address: </strong>" + building_data.address + "</p>" + "<p>" + "<strong>Energy Star Score: </strong>" + building_data.energyStarScore + "</p>" + "<p>" + "<strong>Energy Star Years: </strong>" + building_data.energyStarYears + "</p>" + "<p>" + "<strong>Energy Use Intensity (kbtu/sq ft): </strong>" + building_data.energyUseIntensity + "</p>" + "<p>" + "<strong>Property Type: </strong>" + building_data.propertyType + "</p>" + "<p>" + "<strong>Gross Square Footage: </strong>" + building_data.squareFootage + "</p>" + "<p>" + "<strong>Year Built: </strong>" + building_data.yearBuilt + "</p>" + "<p>" + "<strong>Building Website: </strong>" + building_data.website + "</p>"
        // + "<p>" + "<strong>Other Green Certifications / Programs: </strong>" + building_data. + "</p>"
        + "<p>" + "<strong>Top Energy Efficient Strategies: </strong>" + building_data.energyStrategies + "</p>"
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
  }



  function dataCallback(data, tabletop) {
    var benchmarked = data['Benchmarked Buildings'].elements;
    // var allBuildings = data['All Buildings over 10000 sq ft'].elements;

    benchmarked.forEach(function(building) {
      // console.log(building);
      if (building.lat && building.lng) {
        addMarker({
          lat: building.lat,
          lng: building.lng,
          address: building.address1,
          energyStarScore: building.energystarscore,
          energyStarYears: building['energystarcertification-yearscertified'],
          energyUseIntensity: building.weathernormalizedsiteeuikbtuft,
          propertyname: building.propertyname,
          propertyType: building['primarypropertytype-selfselected'],
          squareFootage: building.grosssquarefootage,
          yearBuilt: building.yearbuilt,
          website: building.buldingwebsite,
          // certifications: building.
          energyStrategies: building['whatarethetopthreeefficiencystrategiesyouhaveimplementedinyourbuildingifyourbuildinghasbeenwrittenupasacasestudypleaseincludethelinktoithereoremailittodenvercepdenvergov.org.']
        });
      }
    });
  }

  Tabletop.init({
    key: dataKey,
    callback: dataCallback
  });
})();

＆＃13;

我是JS的新手，我知道这已被问过好几次了，我已经尝试过实现这些答案，但我不能理解这一点，请善待。

使用close（）并将infowindow变为全局变量将关闭每个窗口，但随后它会破坏tabletop.js（我认为）并且只会在所有标记上拉出一个建筑物地址，因此它不会拉动正确的信息。

如何使用close（）方法，并将infowindow变为全局变量，但在提取数据时仍允许该函数工作？

Answer 1

您需要做的是在打开infowindow_prev.close()引用之前打开的infowindow的任何信息窗之前执行infowindow_prev。为此，您可以在infowindow_prev中声明init()变量{1}}功能。现在init()中的任何内部函数都可以访问infowindow_prev变量（这称为闭包检查this链接以获取更多信息），并在标记内点击分配infowindow_prev为infowindow所以它将具有当前打开的inforwindow对象。

结帐this fiddle

enter code here(function init() {
 var dataKey = '1n-q5n4aaIn95SM0OGoZ6yDp0aSk4gfWeh0-yILHqAS8';
  var mapOptions = {
center: {
  lat: 39.7392,
  lng: -104.9903
},
zoom: 11
};

 var energyStarLogo = "energy_star_logo_small.png"
 var starGreen = "http://www.googlemapsmarkers.com/v1/00FF0D/"
var starYellow = "http://www.googlemapsmarkers.com/v1/FFF000/"
var starGrey = "http://www.googlemapsmarkers.com/v1/8A8989/"
var infowindow_prev;
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
   function content(building) {
{content: building.address1}
 };

  function addMarker(building_data) {
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(building_data.lat, building_data.lng),
  icon: determineIcon(building_data)
});
// console.log(building_data);
 infowindow = new google.maps.InfoWindow({
   content: "<p>" + "<strong>Property Name: </strong>" + building_data.propertyname + "</p>"
    + "<p>" + "<strong>Address: </strong>" + building_data.address  + "</p>"
    + "<p>" + "<strong>Energy Star Score: </strong>" + building_data.energyStarScore + "</p>"
    + "<p>" + "<strong>Energy Star Years: </strong>" + building_data.energyStarYears + "</p>"
    + "<p>" + "<strong>Energy Use Intensity (kbtu/sq ft): </strong>" + building_data.energyUseIntensity + "</p>"
    + "<p>" + "<strong>Property Type: </strong>" + building_data.propertyType + "</p>"
    + "<p>" + "<strong>Gross Square Footage: </strong>" + building_data.squareFootage + "</p>"
    + "<p>" + "<strong>Year Built: </strong>" + building_data.yearBuilt + "</p>"
    + "<p>" + "<strong>Building Website: </strong>" + building_data.website + "</p>"
    // + "<p>" + "<strong>Other Green Certifications / Programs: </strong>" + building_data. + "</p>"
    + "<p>" + "<strong>Top Energy Efficient Strategies: </strong>" + building_data.energyStrategies + "</p>"
});

google.maps.event.addListener(marker, 'click', function() {
  if(infowindow_prev)
      infowindow_prev.close();
  infowindow_prev = infowindow;
  infowindow.open(map, marker);
});
 }



 function dataCallback(data, tabletop) {
var benchmarked = data['Benchmarked Buildings'].elements;
// var allBuildings = data['All Buildings over 10000 sq ft'].elements;
benchmarked.forEach(function(building) {
  // console.log(building);
  if (building.lat && building.lng) {
    addMarker(
      {
        lat: building.lat,
        lng: building.lng,
        address: building.address1,
        energyStarScore: building.energystarscore,
        energyStarYears: building['energystarcertification-yearscertified'],
        energyUseIntensity: building.weathernormalizedsiteeuikbtuft,
        propertyname: building.propertyname,
        propertyType: building['primarypropertytype-selfselected'],
        squareFootage: building.grosssquarefootage,
        yearBuilt: building.yearbuilt,
        website: building.buldingwebsite,
        // certifications: building.
        energyStrategies: building['whatarethetopthreeefficiencystrategiesyouhaveimplementedinyourbuildingifyourbuildinghasbeenwrittenupasacasestudypleaseincludethelinktoithereoremailittodenvercepdenvergov.org.']
      }
    );
  }
});
}

  Tabletop.init({
    key: dataKey,
     callback: dataCallback
  });
 })();

使用Googlemaps API关闭Infowindow

1 个答案: