多個相交過濾器Google Maps API

Question

我已經搜索上下了幾個星期試圖找出如何使用JavaScript和谷歌地圖API多個條件篩選，並發現這基本上是我想要添加到我的地圖（見代碼＆的jsfiddle以下）的功能，但是為了我的一生，我無法使它運轉……我在哪里出錯？

 // 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&#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.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 &amp; 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&#038;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 &amp; 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> 

在這里看到JSfiddle 。 我能夠使過濾器單獨工作，但是我無法像預期的那樣使m堆疊。 為了簡單起見，我直接將JSON粘貼到JavaScript中。

Answer 1

@treighton嘗試設置帶有很少細節的標記以進行測試，例如：

marker1 = new google.maps.Marker({
            title : title,
            position : pos,
            category : category,
            city : city,
            map : map
        });

在這里，我們在每個標記中標記了標題，位置，類別和城市。 鍵入更少的代碼/行意味着更高的百分比以查明問題的原因。 現在完成了一些過濾器的標記，我們現在創建一個用於過濾（隱藏和顯示）標記的函數。

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);
            }
        }