Cannot close infowindows in Google Maps. Error: Uncaught TypeError: Cannot read property 'close' of undefined

Question

我正在尝试在我的 google 地图中为我的 Node.js 网络应用程序中的不同属性创建标记。我已经成功地这样做了，但是当我点击地图时我的信息窗口没有关闭。下面是我的代码和错误。

<% properties.forEach(function(location){ %>
  var loc = {lat: <%=location.lat %>, lng:<%= location.lng %>};

  var contentString = `
  <strong><%= location.name %><br />
  <%= location.location %></strong>
  <p><%= location.description %></p>
  `

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });

  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

       google.maps.event.addListener(marker, 'click', function() {
            // this['infowindow'].open(map, this);

           if(this.open){
            this['infowindow'].close();
            this.open = false;
        }
        else{
            this['infowindow'].open(map,this);
            this.open = true;
        }
        google.maps.event.addListener(map, 'click', function() {
            this['infowindow'].close();
            this.open = false;
        });

    });

  <% }); %>

我在控制台上得到的错误是

Uncaught TypeError: Cannot read property 'close' of undefined

Answer 1

评论：

您正在为每个标记添加一个 map 点击监听器（您只需要一个）
map 点击侦听器中的 this 将是 map，而不是标记。

建议：

在创建标记时保留对标记的引用（以便您可以遍历它们并在单击 map 时关闭信息窗口）
只在标记创建循环之外创建一个 map 点击侦听器，关闭其中所有打开的信息窗口。

var markers = [];  // create markers array to keep references to the markers

<% properties.forEach(function(location){ %>
  var loc = {lat: <%=location.lat %>, lng:<%= location.lng %>};

  var contentString = '
  <strong><%= location.name %><br />
  <%= location.location %></strong>
  <p><%= location.description %></p>
  '
  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });

  markers.push(marker);  // add each created marker to the array

  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    if(this.open){
      this['infowindow'].close();
      this.open = false;
    }
    else{
      this['infowindow'].open(map,this);
      this.open = true;
    }
  });

  <% }); %>
  // when the map is clicked, close any open infowindows
  google.maps.event.addListener(map, 'click', function() {
    for (var i = 0; i < markers.length; i++) {
      markers[i]['infowindow'].close();
      markers[i].open = false;
    }
  });

proof of concept fiddle

代码片段：

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var markers = [];
  // <% properties.forEach(function(location){ %>
  var loc = {
    lat: -25.363,
    lng: 131.044
  };

  var contentString = '<strong>name<br />location</strong><p>description</p>';

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });
  markers.push(marker);
  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    // this['infowindow'].open(map, this);

    if (this.open) {
      this['infowindow'].close();
      this.open = false;
    } else {
      this['infowindow'].open(map, this);
      this.open = true;
    }
  });

  // ============ 2 ============
  // 30.0002° S, 136.2092° E
  var loc = {
    lat: -30,
    lng: 136.2092
  };

  var contentString = '<strong>name 2<br />location 2</strong><p>description 2</p>';

  var marker = new google.maps.Marker({
    position: loc,
    map: map
  });
  markers.push(marker);
  marker['infowindow'] = new google.maps.InfoWindow({
    content: contentString
  });

  google.maps.event.addListener(marker, 'click', function() {
    // this['infowindow'].open(map, this);

    if (this.open) {
      this['infowindow'].close();
      this.open = false;
    } else {
      this['infowindow'].open(map, this);
      this.open = true;
    }
  });

  // <% }); %>
  google.maps.event.addListener(map, 'click', function() {
    for (var i = 0; i < markers.length; i++) {

      markers[i]['infowindow'].close();
      markers[i].open = false;
    }
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

Cannot close infowindows in Google Maps. Error: Uncaught TypeError: Cannot read property 'close' of undefined

Cannot close infowindows in Google Maps. Error: Uncaught TypeError: Cannot read property 'close' of undefined

google-maps

infowindow