Во-первых, Stackoverflow до сих пор блестяще помогал мне преодолевать ряд проблем. У меня очень мало знаний о JS, и я был бы очень признателен за помощь в преодолении одного огромного препятствия, с которым я столкнулся.
У меня есть проект, который по сути включает создание функции карты Google, которая содержит маркеры, относящиеся к новостным событиям. в определенной области. У пользователя есть возможность использовать флажки на боковой панели, что позволяет ему фильтровать маркеры по категориям, дате и области. Эти маркеры перекрываются - и хотя мне до сих пор удавалось заставить флажки работать по отдельности, они не работают должным образом. Например, когда я отфильтрую вниз, чтобы показать только события за 19 апреля, а затем отфильтрую, чтобы удалить преступную деятельность (например), будут показаны события преступной активности, которые существуют в категориях дат, которые не были проверены.
Работа, которую я проделал до сих пор, выглядит следующим образом:
var map;
var customIcons = [];
var markerGroups = [];
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(32.8872, 13.1913),
zoom: 8,
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('/platform/themes/platform/parsetoxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute('id');
var id_marker = markers[i].getAttribute('incidentcategory');
var type = markers[i].getAttribute('incidentcategory');
var incidenttype = markers[i].getAttribute('incidenttype');
var incidentlocation = markers[i].getAttribute('location');
var detail = markers[i].getAttribute('detail');
var incidentcategory = markers[i].getAttribute('incidentcategory');
var icontype = markers[i].getAttribute('iconcolor');
var incidentdate = markers[i].getAttribute('incidentdate');
var region = markers[i].getAttribute('region');
var district = markers[i].getAttribute('district');
var regionformatted = markers[i].getAttribute('regionformatted');
var districtformatted = markers[i].getAttribute('districtformatted');
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng'))
);
var icon = customIcons[icontype] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
type: type
});
if (!markerGroups[type]) markerGroups[type] = [];
markerGroups[type].push(marker);
if (!markerGroups[incidentdate]) markerGroups[incidentdate] = [];
markerGroups[incidentdate].push(marker);
if (!markerGroups[regionformatted]) markerGroups[regionformatted] = [];
markerGroups[regionformatted].push(marker);
};
google.maps.event.addDomListener(document.getElementById('crime'), 'click', function() {
showMarker("crime")
});
google.maps.event.addDomListener(document.getElementById('civilunrest'), 'click', function() {
showMarker("civilunrest")
});
google.maps.event.addDomListener(document.getElementById('accident'), 'click', function() {
showMarker("accident")
});
google.maps.event.addDomListener(document.getElementById('northwestern'), 'click', function() {
showMarker("northwest")
});
google.maps.event.addDomListener(document.getElementById('eastern'), 'click', function() {
showMarker("eastern")
});
google.maps.event.addDomListener(document.getElementById('southwestern'), 'click', function() {
showMarker("southwestern")
});
google.maps.event.addDomListener(document.getElementById('2020-04-15'), 'click', function() {
showMarker("2020-04-15")
});
google.maps.event.addDomListener(document.getElementById('2020-04-14'), 'click', function() {
showMarker("2020-04-14")
});
google.maps.event.addDomListener(document.getElementById('2020-04-13'), 'click', function() {
showMarker("2020-04-13")
});
google.maps.event.addDomListener(document.getElementById('2020-04-12'), 'click', function() {
showMarker("2020-04-12")
});
});
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[incidentdate].length; i++) {
var marker = markerGroups[incidentdate][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[regionformatted].length; i++) {
var marker = markerGroups[regionformatted][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function bindInfoWindow(marker, map, infoWindow, infowincontent, infowincontentinner, id, incidentdate, incidentcategory, incidentlocation, incidenttype, detail, icon, icontype, region, district, point) {
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
}
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
Моя html разметка для флажков:
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-15" value="2020-04-15" checked />
<label for="2020-04-15">15 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-14" value="2020-04-14" checked />
<label for="2020-04-14">14 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-13" value="2020-04-13" checked />
<label for="2020-04-13">13 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-12" value="2020-04-12" checked />
<label for="2020-04-12">12 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="northwestern" value="northwestern" checked/>
<label for="northwestern">North-West</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="eastern" value="eastern" checked/>
<label for="eastern">Eastern Region</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="southwestern" value="southwestern" checked/>
<label for="southwestern">South-Western Region</label>
</div>
<div class="icheck-material-accident">
<input type="checkbox" id="accident" value="accident" checked/>
<label for="accident">Accident</label>
</div>
<div class="icheck-material-civilunrest">
<input type="checkbox" id="civilunrest" value="civilunrest" checked/>
<label for="civilunrest">Civil Unrest</label>
</div>
<div class="icheck-material-crime">
<input type="checkbox" id="crime" value="crime" checked/>
<label for="crime">Crime</label>
</div>
Пример XML Используемые маркеры:
<marker id="31" incidenttype="Crime" detail="The police conducted a routine patrol of the coastline" lat="10.9534071" lng="50.1204431" location="Example" incidentcategory="crime" iconcolor="crime" incidentdate="2020-03-16" region="Eastern Region" district="Example Province" regionformatted="eastern" districtformatted="example" />
Любая помощь в решении этой проблемы была бы очень полезна и избавила бы меня от перенесения ушиба на лбу после того, как я провел большую часть вчера, вчера вечером и рано утром пытаюсь найти решение этой проблемы.
Большое спасибо заранее.