单击另一个标记时谷歌地图关闭信息窗口

Question

我知道有很多问题与我的问题有关。但我几乎看过所有这些并尝试应用其中一些。但什么也没有发生。下面是我的代码

 var locations =
        [{ "id": 1, "ReferenceNumber": "52525252525", "Address" : "School" , "Latitude": "21.585486", "Longitude": "50.258745" },
         { "id": 2, "ReferenceNumber": "6262626262", "Address" : "University", "Latitude": "21.54484411", "Longitude": "50.14846648" },
         { "id": 3, "ReferenceNumber": "424242424", "Address": "PUMPING STATION ", "Latitude": "21.9856341", "Longitude": "61.2587466" }];

我添加的上述位置只是少数虚假条目，否则我有超过 150 个位置

$.each(locations, function(i, item) {

    var marker = new google.maps.Marker({
        'position': new google.maps.LatLng(item.Latitude, item.Longitude),
        'map': map,
        'title': item.Latitude + "," + item.Longitude
    });

    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

    var infowindow = new google.maps.InfoWindow({
        content: "<div class='infoDiv'><h3>Reference#: </h3> <h6>" + item.ReferenceNumber + "<h3>Location: </h3> <h6>" + item.Address + "</div></div>"
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(map, "click", function(event) {
        infowindow.close();
        //autoCenter();
    });
})

任何帮助将不胜感激。

Answer 1

不要在循环中创建信息窗口。您只需要一个对象并根据您单击的标记设置其内容。

您还需要在标记单击侦听器周围使用闭包。类似的东西：

google.maps.event.addListener(marker, 'click', (function(marker) {

  return function() {

    // Something here
  }

})(marker));

下面的工作示例。

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  $.each(locations, function(i, item) {

    var marker = new google.maps.Marker({
      position: item[0],
      map: map,
      title: item[1],
    });

    google.maps.event.addListener(marker, 'click', (function(marker) {

      return function() {
        infowindow.setContent(item[2]);
        infowindow.open(map, marker);
      }

    })(marker));
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  height: 150px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>