我正在尝试选择显示和隐藏带有类别的标记。 它的工作正常,但如果地图上有一个markercluster则无法正常工作。 例如。当我在类别餐厅消失的地图上选择类别 bar 标记时,但是标记集群仍然在地图上。这是我的intin功能:
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(52.6145, 21.3418);
var mapOptions = {
zoom: 6,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
// Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
document.getElementById('field').value = +position.coords
.latitude + "," + position.coords.longitude;
marker = new google.maps.Marker({
position: pos,
animation: google.maps.Animation.DROP,
map: map
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("db/parse_xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName(
"marker");
markerArray = [];
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var cover = markers[i].getAttribute("cover");
var point = new google.maps.LatLng(parseFloat(markers[i]
.getAttribute("lat")), parseFloat(markers[i]
.getAttribute("lng")));
var html = "<div id='infobox'><img src='" + cover +
"'/><b>" + name + "</b><br>" + address +
" <br/><input type='button' id='end' onClick=calcRoute() name='" +
name + "," + address +
"' value='Wyznacz trasę'></div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
category: type
});
markerArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
document.getElementById('pasekBoczny').innerHTML +=
'<li class="list-sidebar" ><a href="javascript:myclick(' +
i + ')" >' + name + '</a></li>';
// markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markerArray);
});}
和我的过滤功能:
filterMarkers = function (category) {
for (i = 0; i < markers.length; i++) {
marker = markers[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}}
答案 0 :(得分:1)
我假设您不想完全删除标记簇,只需更改隐藏标记的位置即可。当您循环标记时,删除您从群集中隐藏的标记,如下所示:
// Categories don't match
else {
marker.setVisible(false);
markerCluster.removeMarker(marker);
}
同样,如果您显示标记,则可能需要使用addMarker
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
markerCluster.addMarker(marker);
}
然后你可能需要在MarkerClusterer上调用redraw
函数。
请参阅https://googlemaps.github.io/js-marker-clusterer/docs/reference.html
redraw()重绘群集。
您需要修改代码,使MarkerClusterer成为全局变量。例如
var markerCluster;
function initialize() {
...
markerCluster = new MarkerClusterer(map, markerArray);
}
filterMarkers = function (category) {
for (i = 0; i < markers.length; i++) {
marker = markers[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
markerCluster.addMarker(marker);
}
// Categories don't match
else {
marker.setVisible(false);
markerCluster.removeMarker(marker);
}
}
markerCluster.redraw();
};