我设法通过浏览本网站按类别过滤标记。但是当我需要过滤多组类别时，我就陷入了困境。
类似的东西：
类型：类型1，类型2，类型3，类型4
班级：1级，2级，3级
这是我到目前为止所做的事情（尽可能简单）：http://jsbin.com/rahur/1/edit?html,js,output
快速浏览一下这里是主要部分：
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][0], markers[i][1]);
bounds.extend(pos);
marker = new google.maps.Marker({
position:pos,
map:map,
'sgroup': markers[i][3]['sgroup'],
'sclass': markers[i][3]['sclass'],
'stype': markers[i][3]['stype']
});
markersType.push(marker);
}
function toggleMarkers(category, visible) {
jQuery(markersType).each(function(id, marker) {
if (jQuery.inArray( category, marker.stype ) != -1)
marker.setVisible(visible);
});
}
$( "#type-school-list input:checkbox" ).click(function() {
$('#type-school-list input:checkbox').each(function () {
toggleMarkers($(this).val(), $(this).is(":checked"));
});
});
不确定我是否在正确的轨道上，因为我尝试过的几件事情都不能正常工作。如果你能指出我正确的方向，我真的很感激。
谢谢！
答案 0 :(得分：0)
我遇到了三个不同类别的同样问题，这是我的解决方案：
Javascript
<script>
var markers = [];
var iterator = 0;
var line = []
function initialize(){
var i;
var infowindowArr = [];
var chania = new google.maps.LatLng(35.513829800000000000,24.018036700000040000);
var mapOptions = {
zoom: 11,
center: chania
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var newMarker;
var image = 'some url';
function addMarker() {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(line[iterator][1],line[iterator][0]),
map: map,
title: line[iterator][2],
animation: google.maps.Animation.DROP,
icon: image
});
newMarker.period = line[iterator][4];
newMarker.category = line[iterator][5];
newMarker.section = line[iterator][6];
newMarker.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
markers.push(newMarker);
iterator++;
}
for (i = 0; i < line.length; i++) {
setTimeout(function() {
addMarker();
}, i * 50);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
//each array of this array has number of fields equal to the number of filters for its filter category, its makes more sense if you see the html code
var filtersArr = [
[false,false,false,false,false,false,false,false],
[false,false,false,false,false,false,false,false,false,false,false,false,false,false],
[false,false,false,false,false,false,false]
];
function filterMarkers(event)
{
//hide all markers
for (var i = 0; i < markers.length; i++) {
markers[i].setVisible(false);
}
//get checkbox clicked value and id
event = event || window.event; // IE
var target = event.target || event.srcElement; // IE
var pos;
var arr = target.value;
// Get the array filter position (and set it true or false) from the checkbox id.
如果你看到html我希望你能弄明白我在这做什么。它不是很好，但我有一个截止日期，所以我不必做更好的事情。
if ( arr == 1 ) {
pos = target.id - 8;
} else if ( arr == 2 ) {
pos = target.id - 22;
} else {
pos = target.id;
}
//update filtersArray
if (document.getElementById(target.id).checked) {
filtersArr[arr][pos] = true;
} else {
filtersArr[arr][pos] = false;
}
这里有算法部分，基本上是为您提供正确的滤光标记。
//existing filters scenario
if ( isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == false ) {
for (i = 0; i < markers.length; i++) {
if ( filtersArr[1][markers[i].category] == true && filtersArr[2][markers[i].section] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[2]) == false ) {
for (i = 0; i < markers.length; i++) {
if ( filtersArr[0][markers[i].period] == true && filtersArr[2][markers[i].section] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[2]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[1]) == false ) {
for (i = 0; i < markers.length; i++) {
if ( filtersArr[0][markers[i].period] == true && filtersArr[1][markers[i].category] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == true ) {//true,true,false Scenario
for (i = 0; i < markers.length; i++) {
if ( filtersArr[1][markers[i].category] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[0]) == true && isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[2]) == false ) {
for (i = 0; i < markers.length; i++) {
if ( filtersArr[2][markers[i].section] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[1]) == true && isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[2]) == true ) {
for (i = 0; i < markers.length; i++) {
if ( filtersArr[0][markers[i].period] == true ) {
markers[i].setVisible(true);
}
}
}
else if ( isUnchecked(filtersArr[0]) == false && isUnchecked(filtersArr[1]) == false && isUnchecked(filtersArr[2]) == false ) {//false,false,false Scenario
for (i = 0; i < markers.length; i++) {
if ( filtersArr[0][markers[i].period] == true && filtersArr[1][markers[i].category] == true && filtersArr[2][markers[i].section] == true ) {
markers[i].setVisible(true);
}
}
}
}
检查某个类别的所有过滤器是否未选中的功能
//checks if an array (filter category) is unchecked
function isUnchecked(arr)
{
var j;
for(j=0;j<arr.length;j++) {
if ( arr[j] == true) {
return false;
}
}
return true;
}
HTML
<body>
<div id="map-canvas"></div>
<div id="filters">
<span id="perOptions">
<h4 style="color:#dd6303;font-family:roboto !important;font-size:14px;">Ιστορική Περίοδος</h4><input type="checkbox" id="0" value="0" onclick="filterMarkers(event);">Βυζαντινή περίοδος </br>
<input type="checkbox" id="1" value="0" onclick="filterMarkers(event);">Ενετική περίοδος</br>
<input type="checkbox" id="2" value="0" onclick="filterMarkers(event)">
<input type="checkbox" id="3" value="0" onclick="filterMarkers(event)">Κρητική πολιτεία</br>
<input type="checkbox" id="4" value="0" onclick="filterMarkers(event)">Νεώτεροι χρόνοι </br>
<input type="checkbox" id="5" value="0" onclick="filterMarkers(event)">Προϊστορικοί περίοδος</br>
<input type="checkbox" id="6" value="0" onclick="filterMarkers(event)">Οθωμανική κυριαρχία</br>
<input type="checkbox" id="7" value="0" onclick="filterMarkers(event)">Γεωμετρική Περίοδος</br>
</span>
<span id="kindOptions">
<h4 style="color:#dd6303;font-family:roboto !important;font- size:14px;">Κατηγορία</h4>
<input type="checkbox" id="8" value="1" onclick="filterMarkers(event);">Αρχαιολογικός χώρος</br>
<input type="checkbox" id="9" value="1" onclick="filterMarkers(event);" >Εκκλησία</br>
<input type="checkbox" id="10" value="1" onclick="filterMarkers(event);">Πλατεία</br>
<input type="checkbox" id="11" value="1" onclick="filterMarkers(event);" >Αρχιτεκτονικό Μνημείο</br>
<input type="checkbox" id="12" value="1" onclick="filterMarkers(event);">Μουσείο</br>
<input type="checkbox" id="13" value="1" onclick="filterMarkers(event);">Τζαμί</br>
<input type="checkbox" id="14" value="1" onclick="filterMarkers(event);" >Ιστορική Συνοικία</br>
<input type="checkbox" id="15" value="1" onclick="filterMarkers(event);">Ιστορική Συνοικία/</br>Αρχιτεκτονικό Μνημείο</br>
<input type="checkbox" id="16" value="1" onclick="filterMarkers(event);">Φρούριο</br>
<input type="checkbox" id="17" value="1" onclick="filterMarkers(event);">Χαμάμ</br>
<input type="checkbox" id="18" value="1" onclick="filterMarkers(event);">Κρήνη</br>
<input type="checkbox" id="19" value="1" onclick="filterMarkers(event);">Αρχιτεκτονικό /</br> Πολιτιστικό Μνημείο</br>
<input type="checkbox" id="20" value="1" onclick="filterMarkers(event);">Ιστορικοί Οδοί</br>
<input type="checkbox" id="21" value="1" onclick="filterMarkers(event);">Πινακοθήκη</br>
</span>
<span id="areaOptions">
<h4 style="color:#dd6303;font-family:roboto !important;font-size:14px;">Δημοτική Ενότητα</h4>
<input type="checkbox" id="22" value="2" onclick="filterMarkers(event);">Χανίων</br>
<input type="checkbox" id="23" value="2" onclick="filterMarkers(event);" >Ακρωτηρίου</br>
<input type="checkbox" id="24" value="2" onclick="filterMarkers(event);">Σούδας</br>
<input type="checkbox" id="25" value="2" onclick="filterMarkers(event);">Θερίσου</br>
<input type="checkbox" id="26" value="2" onclick="filterMarkers(event);" >Κεραμειών
</span>
</div>
</body>
答案 1 :(得分：0)
同一目的是在一个项目中建立多组复选框。经过几次实验，我发现一个元素的每个标记将具有一个数据组合，我们可以将这些数据组合起来以构造一个值作为google map标记中的类别。
这是我的解决方案。在此示例中，我有如下两组复选框过滤器。
HTML
<form class="form-inline">
<div class="form-group">
<label class="control-label">Gender: </label>
<input type="checkbox" class="g1" value="F" checked="checked" onclick="clickBox()" /> Female
<input type="checkbox" class="g1" value="M" checked="checked" onclick="clickBox()" /> Male
</div>
<div class="form-group">
<label class="control-label">Type of Practice: </label>
<input type="checkbox" class="g2" value="1" checked="checked" onclick="clickBox()" /> Government
<input type="checkbox" class="g2" value="2" checked="checked" onclick="clickBox()" /> GLC
<input type="checkbox" class="g2" value="3" checked="checked" onclick="clickBox()" /> Private
<input type="checkbox" class="g2" value="4" checked="checked" onclick="clickBox()" /> Oversea
<input type="checkbox" class="g2" value="5" checked="checked" onclick="clickBox()" /> Not Practice
</div>
</form>
每个类别为g1和g2的元素组。每个元素将具有在JavaScript中定义的触发器clickBox()。
Google地图
在Google Map内，我没有构造标记的两个类别，而是构建了组合数据。
var marker = new google.maps.Marker({
map: map,
position: point,
});
marker.category = gender + '_' + type_group;
gmarkers.push(marker);
因此，对于marker.category数据，请将gender和type_group数据合并为一个。很有可能它会以“ F_1”，“ F_2”等形式返回，具体取决于数据源。
然后，按如下所示添加过滤器脚本：
/**
* Function to filter markers by category
*/
function clickBox() {
// Create the initial group selection
var checked = [];
// Generate the recursive array item from each groups elements
jQuery('.g1:checkbox:checked').each(function () {
var g1 = jQuery(this).val();
jQuery('.g2:checkbox:checked').each(function () {
var g2 = jQuery(this).val();
// Construct final combination array same as gmap category value
checked.push(g1 + '_' + g2);
});
});
// Apply the visibility set to markers
for (i = 0; i < gmarkers.length; i++) {
marker = gmarkers[i];
// If marker in category of array, show it
if (jQuery.inArray(marker.category, checked) !== -1) {
gmarkers[i].setVisible(true);
}
else {
gmarkers[i].setVisible(false);
}
}
}
每次单击任何复选框元素时，都会触发并响应此JS函数。首先，我们定义一个空的checked变量。然后，我们基于仅选中值的复选框创建一个递归数组值。
此递归排列必须与Google Map类别值中构造的相同。否则，该值将不同。如果您有2个以上组元素，则需要自己添加。
在递归结束时，我们推入checked数组。最后，通过使用jQuery的inArray比较，我们检查每个标记是否与checked数组匹配。