javascript - 缩小后标记重新出现

Question

我有一个 html 表，其中包含很少的位置及其坐标。我在下面的 map 中显示了这些位置，这些位置是聚集的。在此表中，如果我单击任何行，则该集群也必须更新，而这并没有发生。如果我缩小并删除标记并再次放大标记，则会重新出现。谁能帮我解决这个问题。我有大麻烦了。

var beaches = [
  ["location 1", 18.7061, 98.9817],
  ["location 2", 18.7669, 99.0905]
];
var markers = [];
var map;

function clickHandlerDelegate(clickEvent) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
 }

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  for (i = 0; i < beaches.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

}
google.maps.event.addDomListener(window, "load", initialize);
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWw5q89RVE630MWJgZrZk5qow8bNPmcqM"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<table id="sum_table">
  <tr class="titlerow">
    <th>S.N.</th>
    <th>Community</th>
    <th width="18%">Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Haringhata</td>
    <td><button class="deleteMarker" data-id="0">Remove</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>West Bengal, India</td>
    <td><button class="deleteMarker" data-id="1">Remove</button></td>
  </tr>
</table>
<div id="map"></div>

Answer 1

var markerCluster 的声明应该在函数 initialize() 之外进行；即

var beaches = [
  ["location 1", 18.7061, 98.9817],
  ["location 2", 18.7669, 99.0905]
];
var markers = [];
var map;
var markerCluster;// Declare here.

现在。在 clickHandlerDelegate 函数中添加

markerCluster.removeMarker(markers[clickEvent]);