javascript 如何在谷歌地图中隐藏和显示 MarkerClusterer
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14894384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide and show MarkerClusterer in google maps
提问by HymanTurky
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!
我做了很多测试，但没有一个能满足我的要求。有人能帮我吗？谢谢！
回答by nicoabie
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
希望有帮助，问候
回答by red_alert
You can, for example:
例如，您可以：
- Define the click handlers for the buttons;
- Using the function getMarkers() to get all the markers and save the results to a variable (var allMarkers = getMarkers());
- Create another variable to add/remove markers (var currentMarkers = allMarkers);
- When you click in each button you can loop the currentMarkers variable and use the functions removeMarker(MARKER_TO_REMOVE) or addMarker(MARKER_TO_ADD, true) (the true is to redraw the map);
- When you are looping the markers you can access their information (do a console.log(marker) to see what I'm talking about);
- 定义按钮的点击处理程序；
- 使用函数 getMarkers() 获取所有标记并将结果保存到变量中 (var allMarkers = getMarkers())；
- 创建另一个变量来添加/删除标记（var currentMarkers = allMarkers）；
- 当您单击每个按钮时，您可以循环 currentMarkers 变量并使用函数 removeMarker(MARKER_TO_REMOVE) 或 addMarker(MARKER_TO_ADD, true) （真正是重绘地图）；
- 当您循环标记时，您可以访问它们的信息（执行 console.log(marker) 以查看我在说什么）；
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
回答by Abdul Manaf Saparuddin
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/
这是一个 jsfiddle 链接来测试http://jsfiddle.net/3s6qfzcy/
