我试图隐藏/显示markerClusterer当用户点击一些按钮:
这里是我想要做的事:
map = new google.maps.Map(document.getElementById("mappa"),mapOptions);
var marker_tmp = [];
var markers_tmp = [];
$.each(json,function(index,value){
var latLng = new google.maps.LatLng(value.lat,value.lng);
var marker = new google.maps.Marker({'position': latLng});
if((value.candidato in markers_tmp)==false){
markers_tmp[value.name]=[];
}
markers_tmp[value.name].push(marker);
});
for(var name in markers_tmp){
markers[name]= new MarkerClusterer(map,markers_tmp[name]);
}
我创建多个markerClusterer每一个被关联到一个特定的名称。
所以,我有相关的这些特定名称的一些按钮,我需要隐藏/显示与该按钮相关的标记聚类器。
/*This is the function associated to a button when it is clicked*/
function hide_show_cluster(name,visible){
var tmp_cluster = markers[name];
//call a function of markerClusterer (tmp_cluster) to hide/show it
}
我已经做了很多的测试,但没有一个满足我的要求。 有人能帮我吗? 谢谢!
我已经整个上午与此挣扎幸好我得到了一个解决方案。
首先,请确保您有最新版本MarkerClustererPlus https://github.com/googlemaps/js-marker-clusterer
那么它是很容易的,
当创建标记确保您
它的可视标志设置为false。
和创建标记聚类器的时候做这种方式:
new MarkerClusterer(map, markers, { ignoreHidden: true });
如果你想显示的聚类器只是这样做:
for (var it in markers) {
markers[it].setVisible(true);
}
markerCluster.repaint();
隐藏集群:
for (var it in markers) {
markers[it].setVisible(false);
}
markerCluster.repaint();
希望它能帮助,问候
你可以,例如:
- 定义的按钮单击处理;
- 使用功能getMarkers()来获取所有标记,并将结果保存到一个变量(VAR allMarkers = getMarkers());
- 创建另一个变量来添加/删除标记(VAR currentMarkers = allMarkers);
- 当在每个按钮可以循环的currentMarkers可变点击和使用的功能removeMarker(MARKER_TO_REMOVE)或addMarker(MARKER_TO_ADD,真)(真正是重绘地图);
- 当你循环的标记,你可以访问他们的信息(做的console.log(标记),看看我说的);
:欲了解更多信息,你可以在这里看到的文档https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
我有同样的情况,这是我要做的事......希望它有助于
集群实例化
let markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
隐藏集群:
function hideMarkers() {
for (let i in markers) {
markers[i].setMap(null);
}
markerCluster.clearMarkers();
}
显示集群:
function showMarkers() {
for (let i in markers) {
markers[i].setMap(map);
}
markerCluster.addMarkers(markers);
}
这里是一个链接的jsfiddle测试http://jsfiddle.net/3s6qfzcy/