我有一个自定义的 Google 地图，上面有多个标记或“位置”，可以在 Wordpress 网站 (6.1.1) 上完美运行。我正在尝试让位置集群，但我无法让它工作。我按照 Google 文档中的说明向我的 javascript 添加了一个空数组“标记”，但仍然没有聚类；
// Create empty array of Markers
const markers = [];
我在控制台中没有任何错误。我不知道我做错了什么。我已阅读所有能找到的内容，但找不到解决方案。地图按预期工作，只是位置不会聚集。
这是我的完整 JavaScript 文件；
//CUSTOM GOOGLE MAP
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 53.41291, lng: -7.94389 },
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
scrollwheel: false,
styles: [
{
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
],
},
{
elementType: "labels.icon",
stylers: [
{
visibility: "off",
},
],
},
{
elementType: "labels.text.fill",
stylers: [
{
color: "#616161",
},
],
},
{
elementType: "labels.text.stroke",
stylers: [
{
color: "#f5f5f5",
},
],
},
{
featureType: "administrative.land_parcel",
elementType: "labels",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [
{
color: "#bdbdbd",
},
],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "poi",
elementType: "labels.text",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575",
},
],
},
{
featureType: "poi.business",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5",
},
],
},
{
featureType: "poi.park",
elementType: "labels.text",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5",
},
],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#757575",
},
],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{
color: "#dadada",
},
],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{}],
},
{
featureType: "road.local",
elementType: "labels",
stylers: [
{
color: "#616161",
},
],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [
{
color: "#9e9e9e",
},
],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [
{
color: "#e5e5e5",
},
],
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [
{
color: "#eeeeee",
},
],
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#526b81",
},
],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
color: "#526b81",
},
],
},
],
});
const locations = [
[
"<h3>Arthaus Hotel Dublin</h3> <p>Mercer Street Lower<br/>Dublin 2<br/>Ireland<br/>D02 TW61</p>",
53.339552834177255,
-6.264078911187995,
"/wp-content/themes/tifcohotels-child/assets/img/map/arthaus-map-marker.svg",
33,
51,
],
[
"<h3>Clontarf Castle Hotel</h3> <p>Castle Ave<br/>Clontarf<br/>Dublin 3<br/>Ireland<br/>D03 W5N0</p>",
53.364754,
-6.206846,
"/wp-content/themes/tifcohotels-child/assets/img/map/clontarf-map-marker.svg",
33,
51,
],
[
"<h3>The Clybaun Hotel</h3> <p>Clybaun Road<br/>Knocknacarra<br/>Co. Galway<br/>Ireland<br/>H91 F62V</p>",
53.26948,
-9.108403,
"/wp-content/themes/tifcohotels-child/assets/img/map/clybaun-map-marker.svg",
33,
51,
],
[
"<h3>Crowne Plaza Dublin Airport</h3> <p>Park Northwood<br/>Santry<br/>Dublin 9<br/>Ireland<br/>D09 X9X2</p>",
53.404402,
-6.245599,
"/wp-content/themes/tifcohotels-child/assets/img/map/crowneplaza-map-marker.svg",
33,
51,
],
[
"<h3>Crowne Plaza Dublin - Blanchardstown</h3> <p>The Blanchardstown Centre<br/>Dublin 15<br/>Ireland<br/>D15 T1FD</p>",
53.395652,
-6.389966,
"/wp-content/themes/tifcohotels-child/assets/img/map/crowneplaza-map-marker.svg",
33,
51,
],
[
"<h3>Crowne Plaza Dundalk</h3> <p>Inner Relief Road<br/>Dundalk<br/>Co. Louth<br/>Ireland<br/>A91 EF88</p>",
53.9803991,
-6.3906617,
"/wp-content/themes/tifcohotels-child/assets/img/map/crowneplaza-map-marker.svg",
33,
51,
],
[
"<h3>Hard Rock Dublin Hotel</h3> <p>18 Exchange Street Upper<br/>Dublin 2<br/>Ireland<br/>D08 AV24</p>",
53.344286,
-6.268025,
"/wp-content/themes/tifcohotels-child/assets/img/map/hardrock-map-marker.svg",
33,
51,
],
[
"<h3>The Hendrick Smithfield</h3> <p>6 – 11 Hendrick Street<br/>Dublin 7<br/>Ireland<br/>D07 KX28</p>",
53.347805,
-6.280856,
"/wp-content/themes/tifcohotels-child/assets/img/map/the-hendrick-map-marker.svg",
33,
51,
],
[
"<h3>Holiday Inn Express Dublin Airport</h3> <p>Northwood Park<br/>NorthWood<br/>Dublin 9<br/>Ireland<br/>D09 RY17</p>",
53.404275,
-6.244526,
"/wp-content/themes/tifcohotels-child/assets/img/map/holiday-express-map-marker.svg",
33,
51,
],
[
"<h3>Innisfallen Hotel</h3> <p>Fossa<br/>Killarney<br/>Co. Kerry<br/>Ireland<br/>V93 CR90</p>",
52.070643,
-9.573754,
"/wp-content/themes/tifcohotels-child/assets/img/map/innisfallen-map-marker.svg",
33,
51,
],
[
"<h3>Hotel Killarney</h3> <p>Cork Road<br/>Killarney<br/>Ireland<br/>V93 FX00</p>",
52.060288,
-9.484677,
"/wp-content/themes/tifcohotels-child/assets/img/map/killarney-map-marker.svg",
33,
51,
],
[
"<h3>Kinsale Hotel & Spa</h3> <p>Rathmore, Kinsale, County Cork, P17 F542</p>",
51.698865,
-8.465479,
"/wp-content/themes/tifcohotels-child/assets/img/map/kinsale-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Waterford Hotel</h3> <p>N25 Cork Road<br/>Waterford<br/>Co. Waterford<br/>Ireland<br/>X91 YV04</p>",
52.24843,
-7.12148,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Limerick Ennis Road Hotel</h3> <p>Coonagh Roundabout<br/>Ennis Road<br/>N18<br/>Limerick<br/>Ireland<br/>V94 R990</p>",
52.673351,
-8.675873,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Limerick Castletroy Hotel</h3> <p>Park Point<br/>Castletroy<br/>Dublin Road<br/>Limerick<br/>Ireland<br/>V94 Y83C</p>",
52.66458,
-8.585064,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Galway City Hotel</h3> <p>Joyce Roundabout<br/>Galway City Centre<br/>Tuam Road Galway<br/>Ireland<br/>H91 HX8Y</p>",
53.282843,
-9.036276,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Dublin Phoenix Park Hotel</h3> <p>Auburn Avenue Roundabout<br/>Navan Road<br/>Dublin 15<br/>Ireland<br/>D15 EW29</p>",
53.380359,
-6.355205,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Dublin City Centre Rathmines</h3> <p>Rathmines Road<br/>Dublin 6<br/>Ireland<br/>D06 HF30</p>",
53.325093,
-6.265007,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Plus Dublin City Centre</h3> <p>44 Townsend St<br/>Dublin 2<br/>Ireland<br/>D02 DY01</p>",
53.346,
-6.25204,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Dublin Airport South Hotel</h3> <p>Shangan Road<br/>Ballymun<br/>Dublin 9<br/>Ireland<br/>D09 W8H7</p>",
53.396499,
-6.26321,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Dublin Airport North Swords Hotel</h3> <p>Pinnock Hill Roundabout<br/>Swords<br/>Co. Dublin<br/>Ireland<br/>K67 K6R2</p>",
53.449318,
-6.223605,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Cork Airport Hotel</h3> <p>Black Ash<br/>Kinsale Road Roundabout<br/>Frankfield Road<br/>Co. Cork<br/>Ireland<br/>T12 E2XY</p>",
51.872464,
-8.470073,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
[
"<h3>Travelodge Belfast Central Hotel</h3> <p>15 Brunswick Street<br/>Belfast<br/>Belfast<br/>United Kingdom<br/>BT2 7GE</p>",
54.595178,
-5.933368,
"/wp-content/themes/tifcohotels-child/assets/img/map/travelodge-map-marker.svg",
33,
51,
],
];
// Create empty array of Markers
const markers = [];
for (let i = 0; i < locations.length; i++) {
const currMarker = locations[i];
const marker = new google.maps.Marker({
position: { lat: currMarker[1], lng: currMarker[2] },
map,
title: currMarker[0],
icon: {
url: currMarker[3],
scaledSize: new google.maps.Size(currMarker[4], currMarker[5]),
},
animation: google.maps.Animation.DROP,
map: map,
});
const infowindow = new google.maps.InfoWindow({
content: currMarker[0],
});
markers.push(marker);
marker.addListener("click", () => {
infoWindow.setContent(label);
infowindow.open(map, marker);
});
}
/// Add a marker clusterer to manage the markers.
new markerClusterer.MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
}
// LOCATION
//53.34619001916453, -6.251790086266539
这里是我通过functions.php 文件加载到页脚的javascript 文件。首先；
///Google Clusterer
<script src="http://tifcohotels.local/wp-content/themes/tifcohotels-child/assets/js/vendor/@googlemaps/markerclusterer/dist/index.min.js?ver=6.1.1" id="google-cluster-script-js"></script>
///My Custom Map script
<script src="http://tifcohotels.local/wp-content/themes/tifcohotels-child/assets/js/maps-v2.js?ver=6.1.1" id="google-custom-script-js"></script>
///Google Map ID
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCG5WJQky4XmaL4mx4Idc6iH58VyYd98xg&callback=initMap" id="google-map-script-js"></script>
如果其他人遇到这个问题，这是我的解决方案：
在我的js文件中：
// Create empty array of Markers
const markers = [];
var infowindow = new google.maps.InfoWindow();
var marker, i;
// const markers = new Array();
for (let i = 0; i < locations.length; i++) {
const currMarker = locations[i];
const marker = new google.maps.Marker({
position: { lat: currMarker[1], lng: currMarker[2] },
map,
title: currMarker[0],
icon: {
url: currMarker[3],
scaledSize: new google.maps.Size(currMarker[4], currMarker[5]),
},
animation: google.maps.Animation.DROP,
map: map,
});
const infowindow = new google.maps.InfoWindow({
content: currMarker[0],
});
markers.push(marker);
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
marker.addListener('mouseout', function(marker, i) { infowindow.close(); });
}
// Add a marker clusterer to manage the markers.
const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
}