这是我的基本代码，用于向Google地图添加一些标记和聚类。
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.json"></script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
for (var i in markers) {
markers[i].setVisible(false);
}
markerCluster.repaint();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
它工作正常，但我想处理隐藏/显示标记簇。 如何在Google地图中隐藏和显示MarkerClusterer（数字和图标）？
我尝试了下面的代码，但没有用。
var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
for (var i in markers) {
markers[i].setVisible(false);
}
markerCluster.repaint();
答案 0 :(得分：1)
我建议使用MarkerClustererPlus。
使用该库，您可以向集群添加侦听器，并使用该侦听器隐藏该集群中的标记，从而隐藏集群：
google.maps.event.addListener(markerCluster, 'click', function(cluster) {
var clusterMarks = cluster.getMarkers();
for (var i in clusterMarks) {
clusterMarks[i].setVisible(false);
}
markerCluster.repaint();
})
}
如果您希望标记在地图放大时显示（或在隐藏集群时显示），则需要编写代码来执行此操作（此代码只是将标记隐藏在单击的集群中）。 / p>
代码段：
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
console.log(data.photos.length);
for (var i = 0; i < data.photos.length; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
markers.push(marker);
}
console.log(markers.length);
var markerCluster = new MarkerClusterer(map, markers, {
ignoreHidden: true,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
google.maps.event.addListener(markerCluster, 'click', function(cluster) {
var clusterMarks = cluster.getMarkers();
for (var i in clusterMarks) {
clusterMarks[i].setVisible(false);
}
markerCluster.repaint();
})
}
var data = {
"count": 13,
"photos": [{
"photo_id": 665502,
"photo_title": "Sunset Beach Walker",
"photo_url": "http://www.panoramio.com/photo/665502",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/665502.jpg",
"longitude": -124.077530,
"latitude": 44.519888,
"width": 500,
"height": 340,
"upload_date": "03 February 2007",
"owner_id": 107359,
"owner_name": "Ron Cooper",
"owner_url": "http://www.panoramio.com/user/107359"
},
{
"photo_id": 723666,
"photo_title": "Majestically Still",
"photo_url": "http://www.panoramio.com/photo/723666",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723666.jpg",
"longitude": -116.175613,
"latitude": 51.327608,
"width": 500,
"height": 332,
"upload_date": "07 February 2007",
"owner_id": 66847,
"owner_name": "Lukas Novak",
"owner_url": "http://www.panoramio.com/user/66847"
},
{
"photo_id": 723015,
"photo_title": "Cape Flattery (infrared)",
"photo_url": "http://www.panoramio.com/photo/723015",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723015.jpg",
"longitude": -124.726700,
"latitude": 48.385898,
"width": 500,
"height": 332,
"upload_date": "07 February 2007",
"owner_id": 66847,
"owner_name": "Lukas Novak",
"owner_url": "http://www.panoramio.com/user/66847"
},
{
"photo_id": 1213006,
"photo_title": "Twilight Drive",
"photo_url": "http://www.panoramio.com/photo/1213006",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1213006.jpg",
"longitude": -114.481916,
"latitude": 51.095841,
"width": 500,
"height": 335,
"upload_date": "07 March 2007",
"owner_id": 66847,
"owner_name": "Lukas Novak",
"owner_url": "http://www.panoramio.com/user/66847"
},
{
"photo_id": 298967,
"photo_title": "Antelope Canyon, Ray of Light",
"photo_url": "http://www.panoramio.com/photo/298967",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/298967.jpg",
"longitude": -111.407890,
"latitude": 36.894037,
"width": 500,
"height": 375,
"upload_date": "04 January 2007",
"owner_id": 64388,
"owner_name": "Artusi",
"owner_url": "http://www.panoramio.com/user/64388"
},
{
"photo_id": 1781717,
"photo_title": "Water Cuts Rock",
"photo_url": "http://www.panoramio.com/photo/1781717",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1781717.jpg",
"longitude": -113.047771,
"latitude": 37.312154,
"width": 333,
"height": 500,
"upload_date": "15 April 2007",
"owner_id": 376395,
"owner_name": "JeffSullivan (www.MyPhotoGuides.com)",
"owner_url": "http://www.panoramio.com/user/376395"
},
{
"photo_id": 498352,
"photo_title": "Wave",
"photo_url": "http://www.panoramio.com/photo/498352",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/498352.jpg",
"longitude": -112.005315,
"latitude": 36.995972,
"width": 500,
"height": 333,
"upload_date": "20 January 2007",
"owner_id": 40260,
"owner_name": "Don Albonico",
"owner_url": "http://www.panoramio.com/user/40260"
},
{
"photo_id": 3749005,
"photo_title": "Once in a Blue Moon....",
"photo_url": "http://www.panoramio.com/photo/3749005",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/3749005.jpg",
"longitude": -105.654080,
"latitude": 40.294560,
"width": 374,
"height": 500,
"upload_date": "05 August 2007",
"owner_id": 87752,
"owner_name": "Richard Ryer",
"owner_url": "http://www.panoramio.com/user/87752"
},
{
"photo_id": 5358174,
"photo_title": "Morning Glory",
"photo_url": "http://www.panoramio.com/photo/5358174",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/5358174.jpg",
"longitude": -110.843537,
"latitude": 44.475020,
"width": 500,
"height": 348,
"upload_date": "16 October 2007",
"owner_id": 66847,
"owner_name": "Lukas Novak",
"owner_url": "http://www.panoramio.com/user/66847"
},
{
"photo_id": 400536,
"photo_title": "Half Dome Mtn, Yosemite Nat Park, CA",
"photo_url": "http://www.panoramio.com/photo/400536",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
"longitude": -119.495888,
"latitude": 37.811411,
"width": 500,
"height": 333,
"upload_date": "12 January 2007",
"owner_id": 85489,
"owner_name": "Bruce MacIver",
"owner_url": "http://www.panoramio.com/user/85489"
},
{
"photo_id": 400536,
"photo_title": "Half Dome Mtn, Yosemite Nat Park, CA",
"photo_url": "http://www.panoramio.com/photo/400536",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
"longitude": -119.495888,
"latitude": 37.811411,
"width": 500,
"height": 333,
"upload_date": "12 January 2007",
"owner_id": 85489,
"owner_name": "Bruce MacIver",
"owner_url": "http://www.panoramio.com/user/85489"
},
{
"photo_id": 1800454,
"photo_title": "Bombay Beach, Salton Sea, CA",
"photo_url": "http://www.panoramio.com/photo/1800454",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1800454.jpg",
"longitude": -115.729235,
"latitude": 33.347316,
"width": 500,
"height": 407,
"upload_date": "16 April 2007",
"owner_id": 107613,
"owner_name": "Tom Grubbe",
"owner_url": "http://www.panoramio.com/user/107613"
},
{
"photo_id": 882660,
"photo_title": "icy_chains_1_hdr_web",
"photo_url": "http://www.panoramio.com/photo/882660",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/882660.jpg",
"longitude": -79.798197,
"latitude": 43.321353,
"width": 500,
"height": 333,
"upload_date": "18 February 2007",
"owner_id": 17488,
"owner_name": "John Gillett",
"owner_url": "http://www.panoramio.com/user/17488"
},
{
"photo_id": 1413,
"photo_title": "Champlain Lookout",
"photo_url": "http://www.panoramio.com/photo/1413",
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1413.jpg",
"longitude": -75.912872,
"latitude": 45.507640,
"width": 500,
"height": 375,
"upload_date": "06 October 2005",
"owner_id": 273,
"owner_name": "JC",
"owner_url": "http://www.panoramio.com/user/273"
},
]
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
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://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script src="https://cdn.jsdelivr.net/npm/@google/markerclustererplus@2.1.11/src/markerclusterer.js"></script>
答案 1 :(得分：0)
您可以通过将其设置为null来隐藏标记。
用于隐藏标记...
function hideMarkers() {
for (let i in markers) {
markers[i].setMap(null);
}
markerCluster.clearMarkers();
}
用于显示标记
function showMarkers() {
for (let i in markers) {
markers[i].setMap(map);
}
markerCluster.addMarkers(markers);
}