如何根据位置列表从地图上更新标记群集

Question

在此页面中，我的顶部有一个由社区名称组成的表，在此表下方，我有一个Google地图，显示了放置在群集一旦缩放。删除地图中的按钮位置，并更新群集编号。我该如何实现？

我在下面发布了我的代码结构：

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ]
];
var markers = [];
var map; //set scope here so various functions can use them
function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    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);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></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

在标记层层插件附加组件的API文档中，方法列表包含

布尔值 removemarker （标记：google.maps.marker）
从集群中删除标记。

为了在单击处理程序中使用该方法（即 clickhandlerdelegate（）），将需要将声明（即使用关键字 var ）移出初始化函数：

var map; //set scope here so various functions can use them
var markerCluster;

然后，当实例化该变量时，请删除 var 关键字：

}
markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

最后，在ClickHandler函数中，将标记（即markers[index]）传递到呼叫 removeMarker（）方法：方法：

function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}

请参阅下面的示例中所示。添加了第三个标记，以证明群集编号在第一个位置的删除时降至2。

var beaches = [
  ["Haringhata", 21.984606, 89.974250],
  ["West Bengal, India",
    21.681855, 88.584980
  ],
  ["New Digha Sea Beach",
    21.617401, 87.500898
  ]
];
var markers = [];
var map; //set scope here so various functions can use them
var markerCluster;
function clickHandlerDelegate(clickEvent) {
  if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
    var index = clickEvent.target.dataset.id;
    markers[index].setMap(null);
    markerCluster.removeMarker(markers[index]);
  }
}
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);
  }
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}
google.maps.event.addDomListener(window, "load", initialize);
//set up delegate
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', clickHandlerDelegate);
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></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>
  
  <tr>
    <td>3</td>
    <td>New Digha Sea Beach</td>
    <td><button class="deleteMarker" data-id="2">Remove</button></td>
  </tr>
</table>
<div id="map"></div>