谷歌地图：删除标记集群[关闭]

Question

希望通过单击浮动面板清除所有标记集群。我可以清除并显示所有标记，但不能显示标记聚集图标。我已经搜索了多个类似的问题，但肯定漏掉了一些东西。

当我尝试使用下面的代码时，它返回的 markerCluster 未在 clearMarkers 中定义。

JS代码：

var map;
var geocoder;
var markerAll;
var markers = [];

//Code to load the map with center point of Monterey MA
function initMap() {
    var monterey = {lat: 42.181613, lng: -73.215013};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: monterey,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        labels: true,
    });

    //collect customer data and geocoder object - declare geocoder as global
    var cusdata = JSON.parse(document.getElementById('data').innerHTML);
    geocoder = new google.maps.Geocoder();  
    codeAddress(cusdata);

    var allData = JSON.parse(document.getElementById('allData').innerHTML);
    showAllCustomers(allData);

    var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
    showSearchedCustomer(searchData);
    
}

function showAllCustomers(allData) {
    //declare info window variable outside of loop to allow to clear when selecting other markers
    var infoWind = new google.maps.InfoWindow;

    //Create marker clusterer to group data
    var markerCluster = new MarkerClusterer(map, [], {
        imagePath: 'images/m'
      });


    Array.prototype.forEach.call(allData, function(data){
        var content = document.createElement('div');
        var strong = document.createElement('strong');
        
        strong.textContent = [data.lastName + ' ' + data.physicalAddress];
        content.appendChild(strong);

        //add image to infowindow - you are also able to add image path to mysql and then append dynamically
        // var img = document.createElement('img');
        // img.src = 'images/santahat.png';
        // img.style.width = '50px';
        // content.appendChild(img);

        //Create markers for customer locations and customize
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
          var markerAll = new google.maps.Marker({
          position: new google.maps.LatLng(data.latitude, data.longitude),
          map: map,
          icon: iconBase + 'homegardenbusiness.png'
        });

        //push markers to marker clusterer
        markerCluster.addMarker(markerAll);
        markers.push(markerAll);

    }) 

}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (let i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }
  // Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
    markerCluster.clearMarkers(markerAll);  <----- THIS IS WHAT I TRIED TO ADD TO CLEAR CLUSTERS
}
  
  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
  }
  

Answer 1

您需要将 markerCluster 放在全局范围内，以便它可以在 clearMarkers 函数中使用（它（可能）在全局范围内定义）。

var markerCluster;
function showAllCustomers(allData) {
    //Create marker clusterer to group data
    markerCluster = new MarkerClusterer(map, [], {
        imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
      });

proof of concept fiddle

代码 sn-p：

var map;
var geocoder;
var markerAll;
var markers = [];

//Code to load the map with center point of Monterey MA
function initMap() {
  var monterey = {
    lat: 42.181613,
    lng: -73.215013
  };
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -28.024,
      lng: 140.887
    },
    mapTypeId: google.maps.MapTypeId.HYBRID,
    labels: true,
  });

  //collect customer data and geocoder object - declare geocoder as global
  var cusdata = JSON.parse(document.getElementById('data').innerHTML);
  geocoder = new google.maps.Geocoder();
  // codeAddress(cusdata);

  var allData = JSON.parse(document.getElementById('allData').innerHTML);
  allData = locations;
  showAllCustomers(allData);

  var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
  // searchData = locations;
  // showSearchedCustomer(searchData);

}
var markerCluster;

function showAllCustomers(allData) {
  //Create marker clusterer to group data
  markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://unpkg.com/@google/markerclustererplus@4.0.1/images/m',
  });

  //declare info window variable outside of loop to allow to clear when selecting other markers
  var infoWind = new google.maps.InfoWindow;
  Array.prototype.forEach.call(allData, function(data) {
    var content = document.createElement('div');
    var strong = document.createElement('strong');

    strong.textContent = [data.lastName + ' ' + data.physicalAddress];
    content.appendChild(strong);

    //add image to infowindow - you are also able to add image path to mysql and then append dynamically
    // var img = document.createElement('img');
    // img.src = 'images/santahat.png';
    // img.style.width = '50px';
    // content.appendChild(img);

    //Create markers for customer locations and customize
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var markerAll = new google.maps.Marker({
      position: new google.maps.LatLng(data.latitude, data.longitude),
      map: map,
      // icon: iconBase + 'homegardenbusiness.png'
    });

    //push markers to marker clusterer
    markerCluster.addMarker(markerAll);
    markers.push(markerAll);
  })
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', clearMarkers);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (let i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
  markerCluster.clearMarkers(markerAll);
}

// Shows any markers currently in the array.
function showMarkers() {
  setMapOnAll(map);
}

const locations = [{
    latitude: -31.56391,
    longitude: 147.154312,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -33.718234,
    longitude: 150.363181,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -33.727111,
    longitude: 150.371124,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -33.848588,
    longitude: 151.209834,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -33.851702,
    longitude: 151.216968,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -34.671264,
    longitude: 150.863657,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -35.304724,
    longitude: 148.662905,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -36.817685,
    longitude: 175.699196,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -36.828611,
    longitude: 175.790222,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.75,
    longitude: 145.116667,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.759859,
    longitude: 145.128708,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.765015,
    longitude: 145.133858,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.770104,
    longitude: 145.143299,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.7737,
    longitude: 145.145187,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.774785,
    longitude: 145.137978,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -37.819616,
    longitude: 144.968119,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -38.330766,
    longitude: 144.695692,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -39.927193,
    longitude: 175.053218,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -41.330162,
    longitude: 174.865694,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -42.734358,
    longitude: 147.439506,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -42.734358,
    longitude: 147.501315,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -42.735258,
    longitude: 147.438,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
  {
    latitude: -43.999792,
    longitude: 170.463352,
    lastName: "Smith",
    physicalAddress: "New York, NY"
  },
];

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* 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>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <input id="btn" type="button" value="Clear Markers" />
  <div id="map"></div>
  <div id="data">[]</div>
  <div id="allData">[]</div>
  <div id="searchData">[]</div>
</body>

</html>