Google Maps API v3标记聚类失效：标记无法聚合求助

我看了你的代码，发现几个关键问题导致聚类功能没生效，咱们一步步来修复：

核心问题分析 #

• 标记未统一收集：你创建MarkerClusterer时用了marker变量，但这个变量是createMarker函数里的局部变量，外部根本访问不到；而且你没有把所有创建的标记存入一个数组，聚类器没有可处理的标记集合。
• 聚类器初始化时机错误：你在displayMarkers()调用前就初始化了MarkerClusterer，但displayMarkers()才是创建标记的地方，这时候标记还没生成，聚类器自然起不了作用。
• API回调函数不匹配：你的Google Maps API脚本里指定了callback=myMap，但实际初始化函数是initialize，这会导致地图初始化出现冲突（虽然你加了window.load监听，但统一回调能避免潜在问题）。

具体修复步骤 #

步骤1：添加数组存储所有标记 #

在initialize函数开头，声明一个数组来统一收集所有创建的标记：

var markersArray = [];

步骤2：修改createMarker函数，将标记存入数组 #

在createMarker函数里，创建完marker后把它push到数组中；同时把map: map改成map: null，让聚类器来控制标记的显示和隐藏（这是聚类器的正确用法）：

function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){
    var marker = new google.maps.Marker({
        map: null, // 交给聚类器管理标记显示
        position: latlng,
        title: name,
        icon: image
    });
    // 原有的点击监听代码保持不变
    google.maps.event.addListener(marker, 'click', function() {
        var iwContent = '<div id="iw_container">' +
        '<div class="iw_title">' + name + '</div>' +
        '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' +address3 + '<br />' +address4 + '<br />' + wwwsite + '</div></div>';
        infoWindow.setContent(iwContent);
        infoWindow.open(map, marker);
    });
    // 将标记加入数组
    markersArray.push(marker);
}

步骤3：调整聚类器的初始化位置和参数 #

把MarkerClusterer的初始化代码移到displayMarkers()调用之后，并且传入我们收集好的markersArray：

displayMarkers();
// 初始化聚类器，传入地图和标记数组
var markerCluster = new MarkerClusterer(map, markersArray, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

步骤4：修正API回调函数 #

把Google Maps API脚本的callback参数改成initialize，和你的初始化函数名一致，同时移除重复的window.load监听：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=initialize"></script>

修改后的完整代码 #

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=initialize"></script>
<script type="text/javascript">
var map;
var infoWindow;
var markersData = [
{lat: 50.25202, lng: 19.015023, name: "Test1", address1: "Test1", address2: "Test1", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 49.824791, lng: 19.040867, name: "Test2", address1: "Test2", address2: "Test2", address3: "2019-03-22", address4: "2019-03-22", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 50.334918, lng: 18.14136, name: "Test3", address1: "Test3", address2: "Test3", address3: "2019-03-08", address4: "2019-03-08", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 49.825794, lng: 19.040889, name: "Test4", address1: "Test4", address2: "Test4", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
]
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.57628900072813,21.356987357139587),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});

// 声明数组存储所有标记
var markersArray = [];

function displayMarkers(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++){
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var address3 = markersData[i].address3;
var address4 = markersData[i].address4;
var image = markersData[i].ikona;
var wwwsite = markersData[i].wwwsite;
createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite);
bounds.extend(latlng);
}
map.fitBounds(bounds);
}

function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){
var marker = new google.maps.Marker({
map: null, // 交给聚类器管理标记显示
position: latlng,
title: name,
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' +address3 + '<br />' +address4 + '<br />' + wwwsite + '</div></div>';
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
// 将标记加入数组
markersArray.push(marker);
}

displayMarkers();
// 初始化聚类器
var markerCluster = new MarkerClusterer(map, markersArray, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>
<body>
<h2 class="przeg">Map:</h2>
<div id="map-canvas"style="width:100%;height:600px;">
</div>
</body>
</html>

额外提示 #

修改后测试时，可以调整地图缩放级别，聚类效果会在标记密集的缩放层级自动触发；同时确保markerclusterer.js的加载顺序在Google Maps API之后（你的代码已经满足这一点）。

内容的提问来源于stack exchange，提问作者Robert Czerwiec