【发布时间】：2021-05-16 10:51:35
【问题描述】：
这里有 2 个经纬度数组。
const locations1 = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
];
const locations2 = [
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
];
我试图通过单击按钮时清除以前的集群来一次加载。
google 推荐的库链接：https://github.com/googlemaps/js-markerclustererplus
由于某种原因，当我单击按钮时，它会添加新集群但不会清除旧集群。 pre-existing clusters image
这是我的代码：
//on click button clear and load again
const refresh = document.querySelector('#clearbtn');
refresh.addEventListener("click", () => {
const clear = setClusters(markers);
clear.clearMarkers();
const markersNew = setMarkers(locations2);
setClusters(markersNew);
});
}
这里是完整的代码：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 2,
center: {
lat: -28.024,
lng: 140.887
},
});
// Create an array of alphabetical characters used to label the markers.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
const setMarkers = (setmarkers) => {
return setmarkers.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
})
};
// Add a marker clusterer to manage the markers.
const setClusters = (setclusters) => {
return new MarkerClusterer(map, setclusters, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
})
};
const markers = setMarkers(locations1);
markerClusterer = setClusters(markers);
//on click button clear and load again
const refresh = document.querySelector('#clearbtn');
refresh.addEventListener("click", () => {
const clear = setClusters(markers);
clear.clearMarkers();
const markersNew = setMarkers(locations2);
setClusters(markersNew);
});
}
const locations1 = [{
lat: -31.56391,
lng: 147.154312
},
{
lat: -33.718234,
lng: 150.363181
},
{
lat: -33.727111,
lng: 150.371124
},
{
lat: -33.848588,
lng: 151.209834
},
{
lat: -33.851702,
lng: 151.216968
},
{
lat: -34.671264,
lng: 150.863657
},
{
lat: -35.304724,
lng: 148.662905
},
{
lat: -36.817685,
lng: 175.699196
},
{
lat: -36.828611,
lng: 175.790222
},
{
lat: -37.75,
lng: 145.116667
},
{
lat: -37.759859,
lng: 145.128708
}
];
const locations2 = [
{
lat: -37.7737,
lng: 145.145187
},
{
lat: -37.774785,
lng: 145.137978
},
{
lat: -37.819616,
lng: 144.968119
},
{
lat: -38.330766,
lng: 144.695692
},
{
lat: -39.927193,
lng: 175.053218
},
{
lat: -41.330162,
lng: 174.865694
},
{
lat: -42.734358,
lng: 147.439506
},
{
lat: -42.734358,
lng: 147.501315
},
{
lat: -42.735258,
lng: 147.438
},
{
lat: -43.999792,
lng: 170.463352
}
];/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 70%;
}
#clearbtn {
display: flex;
flex-wrap: no-wrap;
justify-content: center;
/* height: 40px; */
background: #3498db;
padding: 15px 45px;
margin: 20px 100px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<a href="#" id="clearbtn">Refresh with new markers</a>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>【问题讨论】：
标签： javascript google-maps markerclusterer