如何根据地点列表从地图更新标记群集？

Question

在这个页面中，我在顶部有一个由社区名称组成的表格，在此表格下方我有一个谷歌地图，显示放置的群组名称的标记位置，一旦放大就显示在群集中。现在我想要做的是当我单击表格行中的删除按钮（即通过PHP函数delete_btn（））时，我需要删除与表格行对应的特定标记，并在地图中删除按钮位置并更新群集号也是。我怎样才能做到这一点？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在API documentation的Marker Clusterer add-on中，方法列表包含

  

布尔 removeMarker （marker：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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;