javascript - 在同一个 InfoWindow() 中显示具有相同坐标的绘图点

Question

我正在使用谷歌地图 API 来绘制事件列表。事件有事件举办地点的坐标。大多数场馆都会举办不止一场事件。如何在一个信息窗口中显示具有相同坐标的所有事件。

var locations = [
  ['event number 3', 40.750504, -73.993439],
  ['event number 2', 40.750504, -73.993439],
  ['event number 1', 40.750504, -73.993439],
];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: new google.maps.LatLng(40.7484, -73.9857),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

示例 jsfiddle.net/uu2qkr10/

Answer 1

在创建新标记之前检查标记的坐标。如果新标记与现有标记之一具有相同的坐标，则将其信息添加到现有标记的信息窗口中。

proof of concept fiddle

代码片段:

var gmarkers = [];

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(40.7484, -73.9857),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var j;
  for (var i = 0; i < locations.length; i++) {
    var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    for (j = 0; j < gmarkers.length; j++) {
      if (latlng.equals(gmarkers[j].getPosition())) {
        gmarkers[j].IWcontent += "<hr>" + locations[i][0];
        break;
      }
    }
    if (i == 0 || j == gmarkers.length) {
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        IWcontent: locations[i][0]
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infowindow.setContent(this.IWcontent);
        infowindow.open(map, this);
      });
      gmarkers.push(marker);
    }
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = [
  ['event number 3', 40.750504, -73.993439],
  ['event number 2', 40.750504, -73.993439],
  ['event number 1', 40.750504, -73.993439],
  ['event number 4', 41.750504, -73.993439]
];

#map {
  height: 500px;
  width: 500px;
}

<script src="https://maps.google.com/maps/api/js"></script>
<div id="map"></div>