Google maps api 3 显示具有相同位置的标记群集的信息窗口

我正在使用MarkerClusterer脚本在地图上显示图钉。当用户单击pin时，将显示一个信息窗口。这适用于单针

还有多个管脚具有完全相同的位置，根据MarkerClusterer文档，应该可以显示信息窗口，其中包含此集群下所有管脚的摘要说明。这是使用

infoOnClick:true

选项和

infoOnClickZoom

设置完成的

然而，这似乎不能正常工作。它显示信息窗口，但始终位于地图上的同一位置。即使我点击另一个集群，信息窗口也会显示在最后一个位置

我想我的代码中缺少了一些东西

我制作了一个演示来演示这个问题：

（由于某些原因，在这个JSFIDLE中，根本不显示分组集群的信息窗口，但它可以与实时代码一起工作）

以下是我正在使用的代码：

var map = null;
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 150)
});

// Draw map and make clusterers
function drawMap() {

  var rows = [
    [
      "Marker 01",
      "Address 01",
      "Description 01",
      "1.746491908970114, 16.92597806453705"
    ],
    [
      "Marker 02",
      "Address 02",
      "Description 02",
      "1.7468350744069, 16.917788091659546"
    ],
    [
      "Marker 03",
      "Address 03",
      "Description 03",
      "1.74514002150984, 16.935933225260244"
    ],
    [
      "Marker 04",
      "Address 04",
      "Description 04",
      "1.74514002150984, 16.935933225260244"
    ],
    [
      "Marker 05",
      "Address 05",
      "Description 05",
      "1.74514002150984, 16.935933225260244"
    ],
        [
      "Marker 06",
      "Address 06",
      "Description 06",
      "1.74514002150984, 16.945933225260244"
    ],
    [
      "Marker 07",
      "Address 07",
      "Description 07",
      "1.74514002150984, 16.945933225260244"
    ],
    [
      "Marker 08",
      "Address 08",
      "Description 08",
      "1.74514002150984, 16.945933225260244"
    ]


  ];

  map.markers = [];
  for (var i in rows) {
    var latlng = rows[i][3];
    var htmlDescription = '';
    var commaPos = latlng.indexOf(',');
    var coordinatesLat = parseFloat(latlng.substring(0, commaPos));
    var coordinatesLong = parseFloat(latlng.substring(commaPos + 1, latlng.length));
    // Postition
    var markerpos = new google.maps.LatLng(coordinatesLat, coordinatesLong);
    // Description
    htmlDescription = '<strong>' + rows[i][0] + '</strong> &mdash; ' + rows[i][1];
    // Create marker
    map.markers.push(createMarker(markerpos, rows[i][0], htmlDescription));
  }
  mc.addMarkers(map.markers);
}

// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    content: html
  });

    marker.info = new google.maps.InfoWindow({
  content: html
});

  // Event listener for click function
  google.maps.event.addListener(marker, 'click', function(evt) {
      infowindow.setContent(html);
      infowindow.open(map, marker);
  });
  return marker;
}


// Initialize google map and run query
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(1.74514002150984, 16.925833225250244),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 // Cluster options
  var mcOptions = {
    infoOnClick: true,   // Display info window on click
    zoomOnClick: false,  // Don't zoom on click
    infoOnClickZoom: 14, // Threshold for displaying info window
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  };


  // Mark Clusterer
  mc = new MarkerClusterer(map, map.markers, mcOptions);

  // Close the info window when clicking on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Draw map
  drawMap();
}
// Callback to initialize
google.maps.event.addDomListener(window, 'load', initialize);

var-map=null；
var infowindow=new google.maps.infowindow({
尺寸：新谷歌地图尺寸（150150）
});
//绘制地图并制作聚类器
函数drawMap（）{
变量行=[
[
“标记01”，
“地址01”，
“说明01”，
"1.746491908970114, 16.92597806453705"
],
[
“标记02”，
“地址02”，
“说明02”，
"1.7468350744069, 16.917788091659546"
],
[
“标记03”，
“地址03”，
“说明03”，
"1.74514002150984, 16.935933225260244"
],
[
“标记04”，
“地址04”，
“说明04”，
"1.74514002150984, 16.935933225260244"
],
[
“标记05”，
“地址05”，
“说明05”，
"1.74514002150984, 16.935933225260244"
],
[
“标记06”，
“地址06”，
“说明06”，
"1.74514002150984, 16.945933225260244"
],
[
“标记07”，
“地址07”，
“说明07”，
"1.74514002150984, 16.945933225260244"
],
[
“标记08”，
“地址08”，
“说明08”，
"1.74514002150984, 16.945933225260244"
]
];
map.markers=[]；
用于（行中的变量i）{
var latlng=行[i][3]；
var htmlDescription=''；
var commaPos=latlng.indexOf（'，'）；
var coordinatesLat=parseFloat（latlng.substring（0，逗号））；
var coordinatesLong=parseFloat（latlng.substring（commaPos+1，latlng.length））；
//职位
var markerpos=new google.maps.LatLng（coordinatesLat，coordinatesLong）；
//描述
htmlDescription=''+行[i][0]+'&mdash；'+行[i][1]；
//创建标记
map.markers.push（createMarker（markerpos，rows[i][0]，htmlDescription））；
}
mc.addMarkers（地图标记）；
}
//创建标记和设置事件窗口功能的函数
函数createMarker（latlng、name、html）{
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
标题：姓名，
内容：html
});
marker.info=new google.maps.InfoWindow({
内容：html
});
//click函数的事件侦听器
google.maps.event.addListener（标记，'click'，函数（evt）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
返回标记；
}
//初始化谷歌地图并运行查询
函数初始化（）{
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：新google.maps.LatLng（1.74514002150984,16.925833225250244），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//群集选项
变量mcOptions={
infoOnClick:true，//单击时显示信息窗口
zoomOnClick:false，//单击时不缩放
infoOnClickZoom:14，//显示信息窗口的阈值
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
//马克·克拉斯特
mc=新标记聚类器（map、map.markers、mcOptions）；
//单击地图时关闭信息窗口
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//绘制地图
drawMap（）；
}
//回调以初始化
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

谢谢您的帮助。

我遇到了与您遇到的问题类似的问题。我正在创建标记，但是它也会显示在我创建的最后一个标记上。我发现这个问题是因为我在for循环中创建了一个新的标记。无论出于什么原因，它总是覆盖以前的标记

---

我通过创建一个创建标记的函数来修复这个问题，并使用我需要的任何数据调用该函数并返回标记。

您指的是哪个库的文档？搜索时，我意识到markercluster.js文件是原始文件的一个分支，添加了“infoOnClick”功能。您可以在这里找到它：他们可能应该在js文件中提到它以避免混淆（我刚才下载了它，在查看代码时没有注意到）。这就是为什么它不能在JSFIDLE中工作，而只能在上传脚本的实时网页上工作。所以我猜问题出在forkedJS文件中，不值得尝试修复它，因为它已经9年了。