Um eine Lösung für Ihr Problem zu zeigen, verwende ich jQuery. Ich lese und zeichne auch alle Markierungen einmal. Wenn ein Filter angewendet wird (Kontrollkästchen deaktivieren), ändert sich die Sichtbarkeit der Markierung.
Erstellen Sie zuerst ein Array mit Markierungspunkten und Eigenschaften wie:
var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};
Iterieren Sie dieses Array, wenn Sie eine Markierung auf der Karte zeichnen. Erstellen Sie dabei ein zweites Array mit Verweisen auf Ihre Markierungen und demselben Index wie das erste Array:
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
Wenn sich Ihre Filter ändern, wiederholen Sie das erste Array erneut. Überprüfen Sie Ihre Filter und verwenden Sie das zweite Array, um die Sichtbarkeit der Markierungen zu ändern.
Für jeden Filter können Sie etwas verwenden wie:
$("input[name=stars]:checkbox").bind( "change", function() {
var typevalue = $(this).val();
var typechecked = $(this).is(':checked')
$.each(markers, function(index, m)
{
if(m.stars===parseInt(typevalue))
{
if(typechecked)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
}
});
});
Das Problem hierbei ist, dass Sie die Markierung nicht anzeigen möchten, wenn ein anderer Filter aktiviert (nicht markiert) ist. Um dieses Problem zu lösen, ändern Sie if(typechecked) zu if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')) . Wenn Sie viele Filter haben, wird dies zu komplex. Refactor diesen Code also zu:
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
$("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
Ich bin mir nicht 100% sicher, ob dies auch behoben wird:"In meinem Fall wäre das Theater nur ein weiterer Filter und könnte den Golfplatz überlappen". Vielleicht kann ein Marker in diesem Beispiel Berge UND Wüste sein? Wenn ja, könnten Sie ein Array Ihrer Eigenschaften erstellen wie:
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
ändern Sie Ihre Überprüfung in diesem Fall zu:
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markers example</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="mountains" checked="checked"/>Mountains<br />
<input type="checkbox" name="type" value="desert" checked="checked"/>Desert<br />
</div>
<div style="float:left;">Stars:<br />
<input type="checkbox" name="stars" value="1" checked="checked"/>1<br />
<input type="checkbox" name="stars" value="2" checked="checked"/>2<br />
<input type="checkbox" name="stars" value="3" checked="checked"/>3<br />
</div>
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var markersmap = [];
var markers = [];
function initialize() {
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
markers[1] = {long:-26.363882,lat:132.044922,'type':['mountains'],stars:1};
markers[2] = {long:-27.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[3] = {long:-28.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[4] = {long:-25.363882,lat:130.044922,'type':['desert'],stars:1};
markers[5] = {long:-26.363882,lat:130.044922,'type':['desert'],stars:2};
markers[6] = {long:-27.363882,lat:130.044922,'type':['desert'],stars:3};
markers[7] = {long:-28.363882,lat:130.044922,'type':['desert'],stars:3};
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
</script>
</body>
</html>
