添加谷歌地图事件侦听器以关闭 InfoWindows 中的按钮以显示警报答案

【问题标题】：Add google maps event listener to close button in InfoWindows to show alert添加谷歌地图事件侦听器以关闭 InfoWindows 中的按钮以显示警报
【发布时间】：2021-07-28 11:31:06
【问题描述】：

我想在点击infowindow 中的close 按钮时发出警报。

我尝试制作 addListener closeclick 事件，但没有显示警报。

google.maps.event.addListener(info1, "closeclick", function(){
      alert("closed"); 
      console.log("alert show");
});

我也在上面的代码中尝试了console.log，但它没有显示任何内容

这是完整的代码

var lat = -6.121435,
    lng = 106.774124,
    latlng = new google.maps.LatLng(lat, lng);
var mmm;
var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        fullscreenControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.TOP_left
        }
        
    },
map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.setOptions({disableDoubleClickZoom: true });

var info1 = new google.maps.InfoWindow({}); 

//to show info window and marker
google.maps.event.addListener(map, "dblclick", function (e) { 
        
    placeMarker(e.latLng);
});

//code to show alert
google.maps.event.addListener(info1, "closeclick", function(){
      alert("closed"); 
      console.log("alert show");
});

function placeMarker(location) {
  const contentString = 
       '<p style="text-align: center;margin-top:15px;margin-right:10px;">'+
              'Here is your marker'+
       '</p>';
  info1 = new google.maps.InfoWindow({
     content: contentString,
     maxWidth: 350,
     maxHeight: 150
  });
        
  if (mmm == null) {
     mmm = new google.maps.Marker({
       position: location,
       map: map,
       icon: blue
     });
  } else {
     mmm.setPosition(location);
  }
  info1.open(map, mmm);
}

【问题讨论】：

您需要提供minimal reproducible example。你为什么要声明info1 = new google.maps.InfoWindow 两次？您尝试过什么来解决此问题？你的 Javascript 控制台说什么？
您现在编辑并添加了这是完整代码，但这显然不是完整代码。我没有看到地图声明，我仍然无法判断您共享的各种代码何时执行，等等。同样，您需要提供minimal reproducible example
在运行您提供的代码时出现 Javascript 错误 Uncaught ReferenceError: mmm is not defined。您是否查看过 Javascript 控制台并尝试过调试？当我修复此错误时，我收到第二个错误ReferenceError: blue is not defined ...
我忘记输入var mmm;在代码中。我已经修好了
问题是我在第一条评论中提到的。您将创建一个新的 Infowindow 对象两次（地图加载时一次，每次到达 placeMarker() 函数时一次。您应该改用 Infowindow 的 setContent() 方法。

标签： javascript google-maps infowindow

【解决方案1】：

在解决您的问题的 cmets 中提到的问题后，它可以按预期工作。

请查看代码中的 cmets 了解我所做的修改。我还删除了未定义的icon: blue。

function initialize() {

  var lat = -6.121435,
    lng = 106.774124,
    latlng = new google.maps.LatLng(lat, lng);

  var mmm = null; // Declare mmm variable (null)

  var mapOptions = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      fullscreenControl: false,
      panControl: false,
      streetViewControl: false,
      disableDoubleClickZoom: true, // Moved this line here and remove the setOptions() which has the same effect
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_left
      }
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var info1 = new google.maps.InfoWindow({
    maxWidth: 350, // Moved this here
    maxHeight: 150 // Moved this here
  });

  //to show info window and marker
  google.maps.event.addListener(map, "dblclick", function(e) {
    placeMarker(e.latLng);
  });

  //code to show alert
  google.maps.event.addListener(info1, "closeclick", function() {
    alert("closed");
    console.log("alert show");
  });

  function placeMarker(location) {
    const contentString =
      '<p style="text-align: center;margin-top:15px;margin-right:10px;">' +
      'Here is your marker' +
      '</p>';

    info1.setContent(contentString); // Use the setContent method instead of creating another Infowindow object

    if (mmm == null) {
      mmm = new google.maps.Marker({
        position: location,
        map: map
      });
    } else {
      mmm.setPosition(location);
    }
    info1.open(map, mmm);
  }
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

【讨论】：