如何根据位置列表从地图更新标记群集？ [英] How can I update the marker cluster from the map based on the list of locations?
本文介绍了如何根据位置列表从地图更新标记群集？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这个页面中，我有一个顶部的表格，它由社区名称组成，在这个表格的下面我有一个谷歌地图，显示放置在群集中的这些社区名称的标记位置。我想要做的是当我单击表格行中的删除按钮（即通过PHP函数delete_btn（））时，我需要删除与表格行对应的特定标记，并使用地图中的删除按钮位置并更新簇号也是如此。
data-lang =jsdata-hide =falsedata-console =truedata-babel =false>
var beaches = [[Haringhata，21.984606，89.974250]，[West Bengal，India，21.681855，88.584980]]; var markers = []; var map ; //在这里设置范围，所以各种函数可以使用它们function clickHandlerDelegate（clickEvent）{if（clickEvent.target.className.indexOf（'deleteMarker'）> -1）{var index = clickEvent.target.dataset.id;标记[指数] .setMap（空）; }} 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，20，18，20，18，1]，键入：'poly'};对于（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（标记）; } var markerCluster = new MarkerClusterer（map，markers，{imagePath：'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}）;} google.maps.event.addDomListener（window ，load，initialize）; //设置委托文件.addEventListener（'DOMContentLoaded'，function（）{document.addEventListener（'click'，clickHandlerDelegate）;}）;
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
解决方案
在 Marker Clusterer插件
布尔值 removeMarker （标记：google.maps.Marker） >
从集群中删除标记。
为了在集群中使用该方法点击处理程序（即 clickHandlerDelegate（）），声明（即关键字 var ）将需要移出 initialize 函数： / p>
var map; //在这里设置范围以便各种函数可以使用它们
var markerCluster;
然后，在实例化该变量时，删除 var 关键字：
}
markerCluster =新的MarkerClusterer（地图，标记，{
imagePath：'https://developers.google .com / maps / documentation / javascript / examples / markerclusterer / m'
}）;
最后，在clickHandler函数中，传递标记（即 markers [index
）调用removeMarker（）方法： （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]，[印度西孟加拉邦，21.681855,88.584980]，[新Digha海滩，21.617401， 87.500898]]; var markers = []; var map; //设置范围在这里所以各种函数可以使用它们var markerCluster; function clickHandlerDelegate（clickEvent）{if（clickEvent.target.className.indexOf（'deleteMarker'）> -1）{var index = clickEvent.target.dataset.id;标记[指数] .setMap（空）; markerCluster.removeMarker（标记[指数]）; }} 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，20，18，20，18，1]，键入：'poly'};对于（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（标记）; } markerCluster = new MarkerClusterer（map，markers，{imagePath：'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}）;} google.maps.event.addDomListener（window， load，initialize）; //设置delegatedocument.addEventListener（'DOMContentLoaded'，function（）{document.addEventListener（'click'，clickHandlerDelegate）;}）;
宽度：100％; margin：0px; < script src =https：//
In this page, I have a table at the top which consists of community names and below this table I have a google map that shows the marker position of those community names placed that are shown in cluster once it is zoom in. Now what I am trying to do is when I click the delete button (i.e. via PHP function delete_btn()) in the table row, I need to remove the specific marker that corresponds to the table row with the delete button position in the map and update the cluster number as well. How can I achieve this?
I have posted my code structure below:
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>
解决方案
In the API documentation for the Marker Clusterer add-on, the methods list contains
boolean removeMarker(marker:google.maps.Marker)
Removes a marker from the cluster.
In order to use that method within the click handler (i.e. clickHandlerDelegate()), the declaration (i.e. with keyword var) will need to be moved out of the initialize function:
var map; //set scope here so various functions can use them
var markerCluster;
Then when instantiating that variable, remove the var keyword:
}
markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
Finally, in the clickHandler function, pass the marker (i.e. markers[index]) to a call to that removeMarker() method:
function clickHandlerDelegate(clickEvent) {
if (clickEvent.target.className.indexOf('deleteMarker') > -1) {
var index = clickEvent.target.dataset.id;
markers[index].setMap(null);
markerCluster.removeMarker(markers[index]);
}
}
See this demonstrated in the example below. A third marker was added to demonstrate that the cluster number goes down to 2 with the deletion of the first location.
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>
这篇关于如何根据位置列表从地图更新标记群集？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
