将谷歌地图事件监听器添加到 InfoWindows 中的关闭按钮以显示警报

问题描述

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

我尝试过 make 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,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);
}

解决方法

解决您的问题评论中提到的问题后，它按预期工作。

关于我修改的内容，请查看代码中的注释。我还删除了未定义的 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>

google-maps infowindow javascript