Untuk menunjukkan solusi untuk masalah Anda, saya menggunakan jQuery. Saya juga membaca dan menggambar semua spidol sekali. Saat filter diterapkan (hapus centang pada kotak centang), visibilitas penanda berubah.
Pertama buat array dengan titik penanda dan properti seperti:
var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};
Ulangi larik ini saat Anda menggambar penanda di peta. Saat melakukan ini, buat larik kedua dengan referensi ke penanda Anda dan indeks yang sama dengan larik pertama:
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
Saat filter Anda berubah, ulangi array pertama lagi. Periksa filter Anda dan gunakan larik kedua untuk mengubah visibilitas penanda.
Untuk setiap filter, Anda dapat menggunakan sesuatu seperti:
$("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);
}
}
});
});
Masalahnya di sini adalah Anda tidak ingin menampilkan penanda saat filter lain aktif (tidak dicentang). Untuk mengatasi perubahan ini if(typechecked) ke if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')) . Jika Anda memiliki banyak filter, ini menjadi rumit. Jadi perbaiki kode ini menjadi:
$("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);
}
})
});
Saya tidak 100% yakin apakah ini juga memperbaiki:"Dalam kasus saya, teater hanya akan menjadi filter lain dan dapat tumpang tindih dengan lapangan golf". Mungkin satu penanda dapat berupa pegunungan DAN gurun dalam contoh ini? Jika demikian, Anda dapat membuat array dari poperies Anda seperti:
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
ubah cek Anda dalam kasus ini menjadi:
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'))
)
)
Contoh:
<!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>
