Để đưa ra giải pháp cho vấn đề của bạn, tôi sử dụng jQuery. Tôi cũng đã đọc và vẽ tất cả các điểm đánh dấu một lần. Khi bộ lọc được áp dụng (bỏ chọn hộp kiểm), độ hiển thị của điểm đánh dấu đã thay đổi.
Đầu tiên, hãy tạo một mảng với các điểm đánh dấu và các thuộc tính như:
var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};
Lặp lại mảng này khi bạn vẽ một điểm đánh dấu trên bản đồ. Khi thực hiện việc này, hãy xây dựng một mảng thứ hai với các tham chiếu đến các điểm đánh dấu của bạn và cùng một chỉ mục với mảng đầu tiên:
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
Khi bộ lọc của bạn thay đổi, hãy lặp lại mảng đầu tiên. Kiểm tra bộ lọc của bạn và sử dụng mảng thứ hai để thay đổi độ hiển thị của các điểm đánh dấu.
Đối với mỗi bộ lọc, bạn có thể sử dụng một cái gì đó như:
$("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);
}
}
});
});
Vấn đề ở đây là bạn không muốn hiển thị điểm đánh dấu khi một bộ lọc khác đang bật (bỏ chọn). Để giải quyết thay đổi này if(typechecked) thành if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')) . Nếu bạn có nhiều bộ lọc, điều này sẽ trở nên phức tạp. Vì vậy, cấu trúc lại mã này thành:
$("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);
}
})
});
Tôi không chắc chắn 100% nếu điều này cũng khắc phục được:"Trong trường hợp của tôi, nhà hát sẽ chỉ là một bộ lọc khác và có thể chồng lên sân gôn". Có thể một điểm đánh dấu có thể là núi VÀ sa mạc trong ví dụ này? Nếu vậy, bạn có thể tạo một loạt các quần chúng của mình như:
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
thay đổi séc của bạn trong trường hợp này thành:
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'))
)
)
Ví dụ:
<!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>
