[英]How to hide and show MarkerClusterer in google maps
i'm trying to hide/show markerClusterer when user clicks some buttons: 我正试图在用户点击某些按钮时隐藏/显示markerClusterer:
Here is what i'm trying to do: 这是我正在尝试做的事情:
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]);
}
I create multiple markerClusterer each one is associated to a particular name. 我创建了多个markerClusterer,每个都与一个特定的名称相关联。
So i have some buttons associated to these particular name and i need to hide/show the marker clusterer associated with that button. 所以我有一些与这些特定名称相关的按钮,我需要隐藏/显示与该按钮关联的标记聚类。
/*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
}
I've done lots of tests but no one satisfy my request. 我做了很多测试,但没有人满足我的要求。 Can someone help me?
有人能帮我吗? Thanks!
谢谢!
I've been struggling the whole morning with this but fortunately I got to a solution. 我整个上午一直在苦苦挣扎,但幸运的是我得到了解决方案。
First of all, make sure you have the latest MarkerClustererPlus version https://github.com/googlemaps/js-marker-clusterer 首先,确保您拥有最新的MarkerClustererPlus版本https://github.com/googlemaps/js-marker-clusterer
then it is very easy, 那很容易
When creating the markers make sure you 创建标记时请确保
set its visible flag to false.
将其可见标志设置为false。
And when creating the marker clusterer do it this way: 创建标记聚类器时,请按以下方式执行:
new MarkerClusterer(map, markers, { ignoreHidden: true });
if you want to show the clusterer just do this: 如果你想显示聚类器就这样做:
for (var it in markers) {
markers[it].setVisible(true);
}
markerCluster.repaint();
to hide the cluster: 隐藏群集:
for (var it in markers) {
markers[it].setVisible(false);
}
markerCluster.repaint();
Hope it helps, regards 希望它有所帮助,问候
You can, for example: 你可以,例如:
For more information you could see the documentation here: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html 有关详细信息,请参阅此处的文档: https : //googlemaps.github.io/js-marker-clusterer/docs/reference.html
I have the same case and this is how I do it... hope it helps 我有同样的情况,这就是我这样做...希望它有所帮助
cluster instanciate
集群实例化
let markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
to hide the clusters:
隐藏群集:
function hideMarkers() {
for (let i in markers) {
markers[i].setMap(null);
}
markerCluster.clearMarkers();
}
to show the clusters:
显示集群:
function showMarkers() {
for (let i in markers) {
markers[i].setMap(map);
}
markerCluster.addMarkers(markers);
}
here is a jsfiddle link to test http://jsfiddle.net/3s6qfzcy/ 这是一个测试http://jsfiddle.net/3s6qfzcy/的jsfiddle链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.