我的地图有问题。
markerClusterer 和 infoWindow 都工作得很好，没有任何 JS 错误，但有一个奇怪的行为。
您可以在链接[1]上看到这个
我注意到只有当“disableAutoPan”设置为 false 时才会发生这种情况。如果将其设置为 true，则不会发生这种情况。 链接 [2] 上的示例。
问题是我想要这个功能，所以如果 infoWindow 不适合地图视图，它就会自动对焦，但当然只有在单击标记时才会自动对焦。
我尝试添加一些代码以在单击群集图标时关闭任何打开的 infoWindows，但它不起作用。第一次或第二次似乎可以工作，但随后就停止工作了。 您可以在链接 [3] 上看到此内容。
这是创建一个标记及其链接的信息窗口的代码片段：
markerLocation = {
lat: 44.085821,
lng: -1.194248 }
const infowindow1 = new google.maps.InfoWindow({
content: ""/*,
disableAutoPan: true*/
});
infoWindowArray.push(infowindow1);
const marker1 = new google.maps.Marker({
position: markerLocation,
map: map,
icon: "/alquileres-vacacionales/img/dk-marker.png"
});
marker1.addListener("click", () => {
if(openInfoWindow!=null) {
openInfoWindow.close();
}
openInfoWindow = infowindow1;
if(infowindow1.getContent()=="") {
fGenerateInfoWindowContent("FR3400.651.1", infowindow1);
}
infowindow1.open({
anchor: marker1,
map,
shouldFocus: false
});
});
markerCluster.push(marker1);
以下是我添加的（非常脏的）测试代码，以查看单击群集时是否可以关闭以前的 infoWindows（仅在单击群集图像时触发，该图像宽 66px）：
$(document).on("click", "img[src='https://maps.gstatic.com/mapfiles/transparent.png']", function() {
if($(this).width()==66) {
for (var i = 0; i < infoWindowArray.length; i++ ) {
infoWindowArray[i].close();
}
if(openInfoWindow!=null) {
openInfoWindow.close();
}
}
});
我还在“map”中添加了一个监听器来关闭之前打开的信息窗口，它执行了所要求的操作，但似乎对解决我的问题没有帮助：
google.maps.event.addListener(map, "click", function(event) {
openInfoWindow.close();
});
我做错了什么，还是“按预期工作”？如果是这样，有什么想法如何让它发挥作用吗？
我检查了 Google 示例页面，它工作正常，但我看到你将“disableAutoPan”设置为“true”：
https://developers.google.com/maps/documentation/javascript/marker-clustering
链接：
[1] https://staging.deskontaliaviajes.com/alquileres-vacacionales/stack.html
[2] https://staging.deskontaliaviajes.com/alquileres-vacacionales/stack-true.html
[3] https://staging.deskontaliaviajes.com/alquileres-vacacionales/stack-force-close.html
我设法以某种方式修复了它。
TL;DR：我刚刚切换回旧版本的markerCluster 库。
检查一些 JSFiddle，我发现其中一个并没有发生我所经历的情况（作者：“/colas”）：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 46.613317, lng: 2.349830},
zoom: 9
});
setMarkers(map);
}
var points = [
['Point 1', 'adresse 1 ', 46.613317, 2.249830],
['Point 2', 'adresse 2 ', 46.713317, 2.249830],
['Point 3', 'adresse 3 ', 46.613317, 2.349830],
['Point 4', 'adresse 4 ', 46.713317, 2.449830],
['Point 5', 'adresse 5 ', 46.613317, 2.449830],
['Point 1', 'adresse 1 ', 46.413317, 2.249830],
['Point 2', 'adresse 2 ', 46.513317, 2.249830],
['Point 3', 'adresse 3 ', 46.513317, 2.349830],
['Point 4', 'adresse 4 ', 46.413317, 2.449830],
['Point 5', 'adresse 5 ', 46.513317, 2.449830],
];
var markersC = [];
function setMarkers(map) {
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < points.length; i++) {
var point = points[i];
var marker = new google.maps.Marker({
position: {lat: point[2], lng: point[3]},
map: map,
title: point[0],
});
markersC.push(marker);
var contentString = '<div class="marker-infowindow">' +
'<h2>'+point[0]+'</h1>'+
'<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';
google.maps.event.addListener(marker, 'click', (function(marker, i, contentString) {
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i, contentString));
}
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markersC,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>首先，我按照该示例重写了代码，但结果仍然相同。
然后我意识到这个示例中使用的 marketClusterer 库是一个较旧的库（我仍在使用最新的“unpkg”）。
我下载了一个较旧的库，现在我的地图可以正常工作。单击时，信息窗口会调整为在地图窗口上可见，并且当我单击标记簇时，地图不会移回到它。
所以基本上，我改变了这个：
const clusterObject = new MarkerClusterer(map, markersCluster, {
imagePath: 'https://staging.deskontaliaviajes.com/alquileres-vacacionales/img/mc',
maxZoom: 15
});
对此：
const clusterObject = new markerClusterer.MarkerClusterer({
map: map,
markers: markersCluster
});
而不是使用：
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
我用的是这个：
<script src="https://cdn.jsdelivr.net/gh/googlemaps/js-marker-clusterer@gh-pages/src/markerclusterer.js"></script>
代码的其余部分完全相同（创建地图、标记、集群、信息窗口开口等...），但切换这些代码可以解决问题。
如果它可以帮助遇到类似问题的人，这里是静态工作版本：
https://staging.deskontaliaviajes.com/alquileres-vacacionales/stack-ok.html
我可以通过单击集群时关闭当前信息窗口来使其工作。
var infowindow = new google.maps.InfoWindow({
disableAutoPan: false // keep the desired auto-pan
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close(); // close the info window if the map is clicked.
});
var markers = add_markers(map, infowindow, coord_tables);
var mc = new markerClusterer.MarkerClusterer({ map, markers });
google.maps.event.addListener(mc, 'click', function(cluster){
infowindow.close(); // close the info window if a cluster is clicked.
});
有了这个，你就可以使用最新的源码了：
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>