多个相交过滤器Google maps API [英] Multiple intersecting filters Google maps API
问题描述
我已经搜索了几个星期，试图找出如何使用JavaScript和Google Maps API筛选多个标准，并找到这个，这实际上是我想添加到我的地图的功能（请参阅下面的代码和JSfiddle），但对于我的生活，我无法让它工作...我在哪里出错？
//引入公园数据JSONvar pJSON = [{id：287，date ：2016-02-24T21：35：49，date_gmt：2016-02-24T21：35：49，guid：{rendered：http：\ / \ / test.yourpdg .net \ / crpd\ /？post_type = parks&＃038; p = 287}，modified：2016-02-24T21：38：40，modified_gmt：2016-02-24T21： 38:40，slug：white-rock-neighborhood-park-2，type：parks，link：http：\ / \ / test.yourpdg ，标题：{渲染：白石邻里公园}，内容：{呈现：}，摘录：{rendered：}，featured_image：0，menu_order：0，acf：{park_photos：false，park_type：[{ term_id：26，name：Parks，slug：parks，term_group：0，term_taxonomy_id：26，taxonomy：facility，description：， ：0，count：36，filter：raw}，{term_id：23，name：Pool& amp;喷洒公园，slu：池喷雾公园，term_group：0，term_taxonomy_id：23，分类法：设施，描述：，父母：0， count：8，filter：raw}]，park_address：10488 White Rock Road< br \ /> \r\\\
Rancho Cordova，CA，map_coordinates：{address ：10488 White Rock Road，Rancho Cordova，CA，美国，lat：38.5852927，lng：-121.30029189999999}，park_info：< p>概要信息：916-362 -1841< \ / p> \\\
< p>租用资讯：916-362-1841< br \ /> \ nRENTALS AVAILABLE（连结下载出租资讯）< \ / p> \\\
< ;< p>< strong> Splash Park Hours：< br \ / /> \\\
< \ / strong> 5月和9月：星期五至星期日，上午10点至下午7点&＃8226;劳动节纪念日：每天上午10点至下午7点&＃8226; park_description：< p>白石公园位于白岩小学街对面。在2011年更新，这个14英亩的公园现在设有一个新的社区中心，水上飞溅公园，游乐场，野餐亭，野餐区和运动场。< \ / p> \ n，aquatic_center：1 ，community_center：1，youth_playground：1，dog_park：，厕所：，family_picnic_areas：1，group_picnic_areas：1 ：1，soccer_fields：1，tennis_courts：1，horseshoe_courts：3，parking：false，links_interest：，custom_sidebar _links：{self：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2\ /公园\ / 287}]，集合：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2 \ / parks}]，about：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2 \ / types\ / parks}]，version-history：[{href ：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2\ / parks\ / 287\ / revisions}] https：\ / \ / api.w.org\/ attachment：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json \ / wp\ / v2\ / media？parent = 287}]，https：\ / \ / api.w.org\ / term：[{taxonomy：facility， embeddable：true，href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2\ / parks\ / 287 \ / facility}，{taxonomy：amenities，embeddable：true，href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json \ / wp\ / v2\ / parks\ / 287\ / amenities}]}}，{id：285，date：2016-02-24T21：34：36， date_gmt：2016-02-24T21：34：36，guid：{rendered：http：\ / \ / test.yourpdg.net\ / crpd\ /？post_type = parks& ＃038; p = 285}，修改：2016-02-24T21：34：36，modified_gmt ：2016-02-24T21：34：36，slug：waterbrook-park，type：parks，link：http：\ / \ / test.yourpdg.net\\ \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\ {rendered：}，featured_image：0，menu_order：0，acf：{park_photos：false，park_type：[{term_id：26，name：Parks slug：park，term_group：0，term_taxonomy_id：26，分类法：facility，description：，parent：0，count：36，过滤器：raw}]，park_address：10849 Waterbrook Drive< br / \\> River，CA 95670，USA，lat：38.57520937925042，lng：-121.28271602083203}，park_info：< p>一般信息：916-362-1841< \\ n 公园时间：日落至日落< p> ; \ / p> \\\
，park_description：< p>这座古朴的公园位于Stone Creek的家中。 < \ / p> \\\
，aquatic_center：，community_center：，youth_playground：1，dog_park： 厕所：，family_picnic_areas：，group_picnic_areas：，baseball_fields：，soccer_fields：，tennis_courts：，horseshoe_courts： ，parking：false，links_interest：，custom_sidebar：}，_links：{self：[{href：http：\ / \ / test.yourpdg。 net \ / crpd\ / wp-json\ / wp\ / v2\ / parks\ / 285}]，collection：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2\ / parks}]，about：[{href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2\ / types\ / parks}]，version-history：[{href：http： \ / \ / test.yourpdg.net\ / crpd\ /可湿性粉剂json\ / wp\ / v2\ / parks\ / 2 85 \ / revisions}]，https：\ / \ / api.w.org\ / attachment：[{href：http：\ / \ / test.yourpdg.net\\ \\ / crpd \ / wp-json\ / wp\ / v2\ / media？parent = 285}]，https：\ / \ / api.w.org\ / term：[ {taxonomy：facility，embeddable：true，href：http：\ / \ / test.yourpdg.net\ / crpd\ / wp-json\ / wp\ / v2 \ / parks \ / 285 \ / facility}，{taxonomy：amenities，embeddable：true，href：http：\ / \ / test.yourpdg.net\\ \\ / crpd\ / wp-json\ / wp\ / v2\ / parks\ / 285\ / amenities}]}}，] //将JSON重构为parkData objectvar parkData = []; for（ i = 0;我< pJSON.length; i ++）{park = pJSON [i]; parkData.push（{id：pJSON [i] .id，标题：pJSON [i] .title.rendered，地址：pJSON [i] .acf.park_address，lat：pJSON [i] .acf.map_coordinates.lat，lng ：pJSON [i] .acf.map_coordinates.lng，类别：pJSON [i] .acf.park_type [0] .slug，aquatic_center：parseInt（pJSON [i] .acf.aquatic_center），community_center：parseInt（pJSON [i] .acf.community_center），youth_playground：parseInt（pJSON [i] .acf.youth_playground），dog_park：parseInt（pJSON [i] .acf.dog_park），洗手间：parseInt（pJSON [i] .acf.restrooms），family_picnic_areas： parseInt（pJSON [i] .acf.family_picnic_areas），group_picnic_areas：parseInt（pJSON [i] .acf.group_picnic_areas），baseball_fields：parseInt（pJSON [i] .acf.baseball_fields），soccer_fields：parseInt（pJSON [i] .acf .soccer_fields），tennis_courts：parseInt（pJSON [i] .acf.tennis_courts），horseshoe_courts：parseInt（pJSON [i] .acf.horseshoe_courts）}）;} console.log（parkData）; //开始mapvar myMap = function ）{var options = {zoom：13，center：new google.map s.LatLng（38.5890723，-121.302728），mapTypeId：google.maps.MapTypeId.ROADMAP，} function init（settings）{map = new google.maps.Map（document.getElementById（settings.idSelector），options）; loadMarkers（）; } // MARKERS markers = {}; markerList = [];函数loadMarkers（parklist）{var parks =（typeof parklist！=='undefined'）？ parklist：parkData; //console.log(parks）; for（i = 0; i
#map {width：500px ;身高：500px; }
< script src =https：// maps .googleapis.com / maps / api / js？sensor = false>< / script>< div id =map>< / div>< div class =filter-setstyle =边距：0;> < button id =load-btnclass =load-btn button is-success> clear filter< / button>< / div>< div class =filter-set> < label for =cat-select> Park类型：< / label> < select name =cat-selectid =cat-selectclass =cat-select> < option value =0>任何< / option> < option value =pool-spray-parks> Pool& amp; amp; amp;喷雾公园< / option> <选项值=运动场>运动场< /选项> < option value =sports-centers> Sports Centers< / option> < option value =recreation-centers>康乐中心< / option> < option value =分区办事处>分区办事处< / option> < option value =parks> Parks< / option> < / select>< / div>< div class =filter-set> < label for =amen-select>设施：< / label> < select name =amen-selectid =amen-selectclass =amen-select> <选项>任何< /选项> < option data-id =aquatic_centervalue =1> Aquatic Center< / option> < option data-id =community_centervalue =1>社区中心< / option> < option data-id =youth_playgroundvalue =1>青少年游乐场< / option> < option data-id =dog_parkvalue =1> Dog Park< / option> < option data-id =restroomsvalue =1> Restrooms< / option> < option data-id =family_picnic_areasvalue =1>家庭野餐区< / option> < option data-id =group_picnic_areasvalue =1> Group Picnic Areas< / option> < option data-id =baseball_fieldsvalue =1>棒球场< / option> < option data-id =soccer_fieldsvalue =1> Soccer Fields< / option> < option data-id =tennis_courtsvalue =1> Tennis Courts< / option> < option data-id =horseshoe_courtsvalue =1> Horseshoe Courts< / option> < / select>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>
请参阅JSfiddle here 。我能够让过滤器单独工作，但我不能让m按照他们应有的方式堆叠。为了简单起见，我直接将JSON粘贴到JavaScript中。 ，例如：
marker1 =新google.maps.Marker（{
title：title，
位置：pos，
类别：category，
city：city，
map：map
}）;
我们在每个标记中都有一个标题，位置，类别和城市标记。较少的代码/行类型意味着更高的百分比，以查明问题的原因。
现在我们已经完成了一些过滤器的标记工作，现在我们创建一个过滤（隐藏和显示）标记的函数。
for（i = 0; i< markers1.length; i ++）{
marker = gmarkers1 [i];
//如果没有选择相同的类别或类别
if（（marker.city == city || city.length === 0）&&（marker.category == category || category.length === 0））{
marker.setVisible（true）;
}
//类别不匹配
else {
marker.setVisible（false）;
}
}
I have searched up and down for weeks trying to figure out how to filter for multiple criteria using JavaScript and the Google Maps API, and have found this which is essentially the functionality I want to add to my map (see code & JSfiddle below), but for the life of me I cannot get it to work... where am I going wrong?
// bring in park data JSON
var pJSON = [{
"id": 287,
"date": "2016-02-24T21:35:49",
"date_gmt": "2016-02-24T21:35:49",
"guid": {
"rendered": "http:\/\/test.yourpdg.net\/crpd\/?post_type=parks&p=287"
},
"modified": "2016-02-24T21:38:40",
"modified_gmt": "2016-02-24T21:38:40",
"slug": "white-rock-neighborhood-park-2",
"type": "parks",
"link": "http:\/\/test.yourpdg.net\/crpd\/parks\/white-rock-neighborhood-park-2\/",
"title": {
"rendered": "White Rock Neighborhood Park"
},
"content": {
"rendered": ""
},
"excerpt": {
"rendered": ""
},
"featured_image": 0,
"menu_order": 0,
"acf": {
"park_photos": false,
"park_type": [{
"term_id": 26,
"name": "Parks",
"slug": "parks",
"term_group": 0,
"term_taxonomy_id": 26,
"taxonomy": "facility",
"description": "",
"parent": 0,
"count": 36,
"filter": "raw"
}, {
"term_id": 23,
"name": "Pool & Spray Parks",
"slug": "pool-spray-parks",
"term_group": 0,
"term_taxonomy_id": 23,
"taxonomy": "facility",
"description": "",
"parent": 0,
"count": 8,
"filter": "raw"
}],
"park_address": "10488 White Rock Road <br \/>\r\nRancho Cordova, CA",
"map_coordinates": {
"address": "10488 White Rock Road, Rancho Cordova, CA, United States",
"lat": "38.5852927",
"lng": "-121.30029189999999"
},
"park_info": "<p>General Information: 916-362-1841<\/p>\n<p>Rental Information: 916-362-1841<br \/>\nRENTALS AVAILABLE(link to download rental information)<\/p>\n<p>Park Hours: Sunrise to Sunset<\/p>\n<p><strong>Splash Park Hours:<br \/>\n<\/strong>May and September: Friday-Sunday only, 10AM-7PM<br \/>\nMemorial Day through Labor Day: Every day, 10AM-7PM<\/p>\n",
"park_description": "<p>White Rock Park is located across the street from White Rock Elementary School. Updated in 2011, this 14-acre park now features a new community center, aquatic splash park, playground, picnic pavilion, picnic areas and athletic fields.<\/p>\n",
"aquatic_center": "1",
"community_center": "1",
"youth_playground": "1",
"dog_park": "",
"restrooms": "",
"family_picnic_areas": "1",
"group_picnic_areas": "1",
"baseball_fields": "1",
"soccer_fields": "1",
"tennis_courts": "1",
"horseshoe_courts": "3",
"parking": false,
"links_interest": "",
"custom_sidebar": ""
},
"_links": {
"self": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/287"
}],
"collection": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks"
}],
"about": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/types\/parks"
}],
"version-history": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/287\/revisions"
}],
"https:\/\/api.w.org\/attachment": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/media?parent=287"
}],
"https:\/\/api.w.org\/term": [{
"taxonomy": "facility",
"embeddable": true,
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/287\/facility"
}, {
"taxonomy": "amenities",
"embeddable": true,
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/287\/amenities"
}]
}
}, {
"id": 285,
"date": "2016-02-24T21:34:36",
"date_gmt": "2016-02-24T21:34:36",
"guid": {
"rendered": "http:\/\/test.yourpdg.net\/crpd\/?post_type=parks&p=285"
},
"modified": "2016-02-24T21:34:36",
"modified_gmt": "2016-02-24T21:34:36",
"slug": "waterbrook-park",
"type": "parks",
"link": "http:\/\/test.yourpdg.net\/crpd\/parks\/waterbrook-park\/",
"title": {
"rendered": "Waterbrook Park"
},
"content": {
"rendered": ""
},
"excerpt": {
"rendered": ""
},
"featured_image": 0,
"menu_order": 0,
"acf": {
"park_photos": false,
"park_type": [{
"term_id": 26,
"name": "Parks",
"slug": "parks",
"term_group": 0,
"term_taxonomy_id": 26,
"taxonomy": "facility",
"description": "",
"parent": 0,
"count": 36,
"filter": "raw"
}],
"park_address": "10849 Waterbrook Drive<br \/>\r\nRancho Cordova, CA",
"map_coordinates": {
"address": "10858 Waterbrook Way, Gold River, CA 95670, USA",
"lat": "38.57520937925042",
"lng": "-121.28271602083203"
},
"park_info": "<p>General Information: 916-362-1841<\/p>\n<p>Park Hours: Sunrise to Sunset<\/p>\n",
"park_description": "<p>This quaint park is nestled between homes in Stone Creek. A large playground structure is the centerpiece of this park.<\/p>\n",
"aquatic_center": "",
"community_center": "",
"youth_playground": "1",
"dog_park": "",
"restrooms": "",
"family_picnic_areas": "",
"group_picnic_areas": "",
"baseball_fields": "",
"soccer_fields": "",
"tennis_courts": "",
"horseshoe_courts": "",
"parking": false,
"links_interest": "",
"custom_sidebar": ""
},
"_links": {
"self": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/285"
}],
"collection": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks"
}],
"about": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/types\/parks"
}],
"version-history": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/285\/revisions"
}],
"https:\/\/api.w.org\/attachment": [{
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/media?parent=285"
}],
"https:\/\/api.w.org\/term": [{
"taxonomy": "facility",
"embeddable": true,
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/285\/facility"
}, {
"taxonomy": "amenities",
"embeddable": true,
"href": "http:\/\/test.yourpdg.net\/crpd\/wp-json\/wp\/v2\/parks\/285\/amenities"
}]
}
}, ]
//restructure JSON into parkData object
var parkData = [];
for (i = 0; i < pJSON.length; i++) {
park = pJSON[i];
parkData.push({
id: pJSON[i].id,
title: pJSON[i].title.rendered,
address: pJSON[i].acf.park_address,
lat: pJSON[i].acf.map_coordinates.lat,
lng: pJSON[i].acf.map_coordinates.lng,
category: pJSON[i].acf.park_type[0].slug,
aquatic_center: parseInt(pJSON[i].acf.aquatic_center),
community_center: parseInt(pJSON[i].acf.community_center),
youth_playground: parseInt(pJSON[i].acf.youth_playground),
dog_park: parseInt(pJSON[i].acf.dog_park),
restrooms: parseInt(pJSON[i].acf.restrooms),
family_picnic_areas: parseInt(pJSON[i].acf.family_picnic_areas),
group_picnic_areas: parseInt(pJSON[i].acf.group_picnic_areas),
baseball_fields: parseInt(pJSON[i].acf.baseball_fields),
soccer_fields: parseInt(pJSON[i].acf.soccer_fields),
tennis_courts: parseInt(pJSON[i].acf.tennis_courts),
horseshoe_courts: parseInt(pJSON[i].acf.horseshoe_courts)
});
}
console.log(parkData);
//begin map
var myMap = function() {
var options = {
zoom: 13,
center: new google.maps.LatLng(38.5890723, -121.302728),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
function init(settings) {
map = new google.maps.Map(document.getElementById(settings.idSelector), options);
loadMarkers();
}
//MARKERS
markers = {};
markerList = [];
function loadMarkers(parklist) {
var parks = (typeof parklist !== 'undefined') ? parklist : parkData;
//console.log(parks);
for (i = 0; i < parks.length; i++) {
var park = parks[i];
if (markerList.indexOf(park.id) !== -1) continue;
var lat = park.lat,
lng = park.lng,
markerId = park.id;
var infoWindow = new google.maps.InfoWindow({
maxWidth: 400
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: park.title,
markerId: park.id,
//icon: park.pin,
map: map
});
markers[markerId] = marker;
markerList.push(parks.id);
var content = park.title + '<br>' + park.category + '<br>' + park.address;
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
}
})(marker, content));
}
}
function removeParkMarker(id) {
if (markers[id]) {
markers[id].setMap(null);
loc = markerList.indexOf(id);
if (loc > -1) markerList.splice(loc, 1);
delete markers[id];
}
}
//filters
var filter = {
category: 0,
aquatic_center: 0,
community_center: 0,
youth_playground: 0,
dog_park: 0,
restrooms: 0,
family_picnic_areas: 0,
group_picnic_areas: 0,
baseball_fields: 0,
soccer_fields: 0,
tennis_courts: 0,
horseshoe_courts: 0
}
var filterMap;
function reduceArray(a) {
r = a.shift().reduce(function(re, v) {
if (res.indexOf(v) === -1 && a.every(function(a) {
return a.indexOf(v) !== -1;
})) res.push(v);
return res;
}, []);
return r;
}
function isInt(n) {
return n % 1 === 0;
}
function filterCtrl(filterType, value) {
var results = [];
if (isInt(value)) {
filter[filterType] = parseInt(value);
} else {
filter[filterType] = value;
}
for (k in filter) {
if (!filter.hasOwnProperty(k) && !(filter[k] !== 0)) {
loadMarkers();
return false;
} else if (filter[k] !== 0) {
results.push(filterMap[k](filter[k]));
} else {
}
}
if (filter[filterType] === 0) results.push(parkData);
if (results.length === 1) {
results = results[0];
} else {
results = reduceArray(results);
}
loadMarkers(results);
console.log(results);
}
filterMap = {
category: function(value) {
return filterByString('category', value);
},
aquatic_center: function(value) {
return filterIntLessThan('aquatic_center', value);
},
community_center: function(value) {
return filterIntLessThan('community_center', value);
},
youth_playground: function(value) {
return filterIntLessThan('youth_playground', value);
},
dog_park: function(value) {
return filterIntLessThan('dog_park', value);
},
restrooms: function(value) {
return filterIntLessThan('restrooms', value);
},
family_picnic_areas: function(value) {
return filterIntLessThan('family_picnic_areas', value);
},
group_picnic_areas: function(value) {
return filterIntLessThan('group_picnic_areas', value);
},
baseball_fields: function(value) {
return filterIntLessThan('baseball_fields', value);
},
soccer_fields: function(value) {
return filterIntLessThan('soccer_fields', value);
},
tennis_courts: function(value) {
return filterIntLessThan('tennis_courts', value);
},
horseshoe_courts: function(value) {
return filterIntLessThan('horseshoe_courts', value);
}
}
function filterByString(dataProperty, value) {
var parks = [];
for (var i = 0; i < parkData.length; i++) {
var park = parkData[i];
if (park[dataProperty] == value) {
parks.push(park);
} else {
removeParkMarker(park.id);
}
}
return parks;
}
function filterIntLessThan(dataProperty, value) {
var parks = [];
for (var i = 0; i < parkData.length; i++) {
var park = parkData[i];
if (park[dataProperty] >= value) {
parks.push(park);
} else {
removeParkMarker(park.id);
}
}
return parks;
}
function resetFilter() {
filter = {
category: 0,
aquatic_center: 0,
community_center: 0,
youth_playground: 0,
dog_park: 0,
restrooms: 0,
family_picnic_areas: 0,
group_picnic_areas: 0,
baseball_fields: 0,
soccer_fields: 0,
tennis_courts: 0,
horseshoe_courts: 0
}
}
return {
init: init,
loadMarkers: loadMarkers,
filterCtrl: filterCtrl,
resetFilter: resetFilter
};
}();
$(function() {
var mapConfig = {
idSelector: 'map',
};
myMap.init(mapConfig);
$('.load-btn').on('click', function() {
var $this = $(this);
// reset everything
$('select').val(0);
myMap.resetFilter();
myMap.loadMarkers();
if ($this.hasClass('is-success')) {
$this.removeClass('is-success').addClass('is-default');
}
});
$('.cat-select').on('change', function() {
myMap.filterCtrl('category', this.value);
});
$('.amen-select').on('change', function() {
myMap.filterCtrl($(this).find('option:selected').data('id'), this.value);
});
});
#map {
width: 500px;
height: 500px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<div class="filter-set" style="margin-top:0;">
<button id="load-btn" class="load-btn button is-success">clear filter</button>
</div>
<div class="filter-set">
<label for="cat-select">Park Type:</label>
<select name="cat-select" id="cat-select" class="cat-select">
<option value="0">Any</option>
<option value="pool-spray-parks">Pool & Spray Parks</option>
<option value="athletic-fields">Athletic Fields</option>
<option value="sports-centers">Sports Centers</option>
<option value="recreation-centers">Recreation Centers</option>
<option value="district-offices">District Offices</option>
<option value="parks">Parks</option>
</select>
</div>
<div class="filter-set">
<label for="amen-select">Amenities:</label>
<select name="amen-select" id="amen-select" class="amen-select">
<option>Any</option>
<option data-id="aquatic_center" value="1">Aquatic Center</option>
<option data-id="community_center" value="1">Community Center</option>
<option data-id="youth_playground" value="1">Youth Playground</option>
<option data-id="dog_park" value="1">Dog Park</option>
<option data-id="restrooms" value="1">Restrooms</option>
<option data-id="family_picnic_areas" value="1">Family Picnic Areas</option>
<option data-id="group_picnic_areas" value="1">Group Picnic Areas</option>
<option data-id="baseball_fields" value="1">Baseball Fields</option>
<option data-id="soccer_fields" value="1">Soccer Fields</option>
<option data-id="tennis_courts" value="1">Tennis Courts</option>
<option data-id="horseshoe_courts" value="1">Horseshoe Courts</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see JSfiddle here. I am able to get the filters to work individually but I cannot get the m to stack like they are supposed to. I have pasted the JSON in to the JavaScript directly for simplicity.
@treighton try setting up markers with few details for testing purposes, for example :
marker1 = new google.maps.Marker({
title : title,
position : pos,
category : category,
city : city,
map : map
});
Here we have a title, position, category and city tagged in each marker. Fewer codes/lines to type means higher percentage to pinpoint the cause of the problem. Now that the tagging of some filters are done we now create a function for filtering (hide and show) of the marker.
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if ((marker.city == city || city.length===0) && (marker.category == category || category.length===0)) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
这篇关于多个相交过滤器Google maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
