Показать/скрыть маркеры с категорией. Не работает с MarkerCluster

54
4

Я пытаюсь сделать выбор, чтобы показать и скрыть маркеры с категорией. Он работает отлично, но не работает, если на карте есть маркеркластер. Например. когда я выбрать категорию штриховых маркера на карте с категорией ресторана disapear, но markercluster все еще находится на карте. Вот моя функция 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);
}
}}

спросил(а) 2020-04-04T00:28:04+03:00 3 месяца назад
1
Решение
54

Я предполагаю, что вы не хотите полностью удалять кластеры маркеров, просто измените те, где вы скрываете маркеры. Когда вы перебираете маркеры, удалите те, которые вы скрываете из кластера, например:

        // 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);
}

Тогда вам, вероятно, потребуется вызвать функцию redraw в MarkerClusterer.

См. 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();
};

ответил(а) 2020-04-04T00:45:19.338900+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема