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

代码段

＆＃13;

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]
];

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这听起来像设计上的矛盾。

此类场地的不同符号如何，并在弹出窗口中按日期排序的事件列表？

Answer 3

只是一点提示。如果向量locations中的元素数量不是太高，我会尝试找到与嵌套迭代具有相似坐标的行，这些将构建一个链接的事件列表，以便在连接的单个信息窗口中显示到一个地方。残酷但有效。

Answer 4

只需更改纬度和经度值即可。不要多次使用相同的值。否则所有标记都放在相同位置。所以你只能查看一个。

，您应该删除位置末尾的,

试试这个，

 var locations = [
  ['event number 3', 40.750504, -73.993439],
  ['event number 2', 47.750504, -73.993439],
  ['event number 1', 50.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));
  }

在同一InfoWindow（）中显示具有相同坐标的绘图点

4 个答案: