Google Map POI信息窗口closeclick事件[重复]答案

【问题标题】：Google Map POI information window closeclick event [duplicate]Google Map POI信息窗口closeclick事件[重复]
【发布时间】：2020-12-31 17:59:44
【问题描述】：

google map POI信息窗口关闭时是否触发closeclick事件？

如果是这样，我该如何收听？

如果没有，是否有办法了解 POI 信息窗口何时关闭？

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

“本地”POI 信息窗口上没有 closeclick 事件。

您可以在单击这些图标时创建自己的信息窗口，并将closeclick 侦听器添加到这些图标。

注意：这将需要调用位置服务来获取要在 InfoWindow 中显示的信息（并决定要显示的内容以及要如何格式化显示的信息）。

Proof of concept fiddle

代码 sn-p：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    // New York, NY, USA (40.7127753, -74.0059728)
    center: {
      lat: 40.7127753,
      lng: -74.0059728
    },
    zoom: 14,
  });
  const infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(infowindow, 'closeclick', function() {
    alert("closeclick");
  });
  google.maps.event.addListener(map, 'click', function(e) {
    if (e.placeId) {
      // Calling e.stop() on the event prevents the default info window from
      // showing.
      // If you call stop here when there is no placeId you will prevent some
      // other map click event handlers from receiving the event.
      e.stop();
      console.log(e.placeId);
      const request = {
        placeId: e.placeId,
        fields: ["name", "formatted_address", "place_id", "geometry"],
      };
      const service = new google.maps.places.PlacesService(map);
      service.getDetails(request, (place, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          infowindow.setContent(
            "<div><strong>" +
            place.name +
            "</strong><br>" +
            "Place ID: " +
            place.place_id +
            "<br>" +
            place.formatted_address +
            "</div>"
          );
          infowindow.setPosition(place.geometry.location);
          infowindow.setOptions({
            pixelOffset: new google.maps.Size(0, -10)
          })
          infowindow.open(map);
        }
      });
    }
  })
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

第二个（更危险的）选项

一个更危险的选择（取决于覆盖InfoWindow 的.setContent 方法，如相关问题中所述：click event listener on styled map icons and labels）。

覆盖InfoWindow 类的.setContent 或.open 方法
捕获对IconMouseEvent 触发时打开的信息窗口的引用
在捕获的InfoWindow 上添加一个closeclick 监听器
移除事件监听函数，将被覆盖的方法替换为原来的

注意：这只会捕获在InfoWindow 上单击“x”时触发的InfoWindow closeclick，而不是在因为另一个InfoWindow 打开而关闭时触发。

代码：

  var iconIw;
  //store the original setContent-function
  var fx = google.maps.InfoWindow.prototype.setContent;
  var listener = google.maps.event.addListener(map, 'click', function(e) {
    // if infowindow for Icon, override setContent, add closeclick listener, replace setContent
    if (e.placeId) {
      console.log(e.placeId);
      //override the built-in setContent-method
      google.maps.InfoWindow.prototype.setContent = function(content) {
        iconIw = this;
        google.maps.event.addListener(iconIw, 'closeclick', function() {
          alert("closeclick");
        });
        listener.remove();
        //run the original setContent-method
        fx.apply(this, arguments);
        google.maps.InfoWindow.prototype.setContent = fx;
      };
    }
  })

proof of concept fiddle

代码 sn-p：

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    // New York, NY, USA (40.7127753, -74.0059728)
    center: {
      lat: 40.7127753,
      lng: -74.0059728
    },
    zoom: 14,
  });
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map
  });
  var infowindow = new google.maps.InfoWindow();
  marker.addListener('click', function(e) {
    infowindow.setContent("<b>Test</b>");
    infowindow.open(map,marker);
  })
  var iconIw;
  //store the original setContent-function
  var fx = google.maps.InfoWindow.prototype.setContent;
  var listener = google.maps.event.addListener(map, 'click', function(e) {
    // if infowindow for Icon, override setContent, add closeclick listener, replace setContent
    if (e.placeId) {
      console.log(e.placeId);
      //override the built-in setContent-method
      google.maps.InfoWindow.prototype.setContent = function(content) {
        iconIw = this;
        google.maps.event.addListener(iconIw, 'closeclick', function() {
          alert("closeclick");
        });
        listener.remove();
        //run the original setContent-method
        fx.apply(this, arguments);
        google.maps.InfoWindow.prototype.setContent = fx;
      };
    }
  })
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

【讨论】：

谢谢。我希望避免这种情况。
添加了第二个（可能风险更大）选项。