在 Google 地图中隐藏 MarkerClusterer？

Question

这是我向谷歌地图添加一些标记和聚类的基本代码。

<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>

它工作正常，但我想处理隐藏/显示标记集群。 如何在谷歌地图中隐藏和显示 MarkerClusterer（数字和图标）？

我尝试了下面的代码，但它不起作用。

        var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
        for (var i in markers) {
        markers[i].setVisible(false);
}

markerCluster.repaint();

Answer 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(); 
  })
}

如果您希望标记在地图放大时显示（或在集群隐藏时显示），您需要编写代码来执行此操作（此代码只是隐藏单击的集群中的标记）。

proof of concept fiddle

代码 sn-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>

Answer 2

您可以通过将其设置为 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);

}