无法关闭Google地图中的信息窗口。错误：未捕获的TypeError：无法读取未定义的属性“close”

Question

我正在尝试在我的谷歌地图中为我在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

评论：

1. 你是为每个标记添加一个map点击监听器（你只需要一个）
2. this点击监听器内的map将是map，而不是标记。

建议：

1. 在创建标记时保持对标记的引用（因此，当单击map时，您可以遍历它们并关闭标记）
2. 只在标记创建循环外创建一个map单击侦听器，关闭其中的所有打开的infowindows。

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>