Javascript /谷歌圖表 - 添加標記過濾器谷歌地圖

Question

我想製作一個地圖，將根據選定的下拉選項填充位置的標記。我有一個半工作的jsfiddle發現這裏

http://jsfiddle.net/kamelkid2/drytwvL8/77/

基本上最終的結果是，用戶可以選擇，如果他們想查看最好按年齡組和/或遊樂場與嬰兒鞦韆適合的場地。所產生的標記將填充在地圖上

我能得到第一標記過濾器才能正常工作

<div id="map-canvas"></div> 
<select id="type" onchange="filterMarkers(this.value);"> 
    <option value="">BEST FOR (SHOW ALL)</option> 
    <option value="BABIES">BEST FOR BABIES</option> 
    <option value="TODDLERS">BEST FOR TODDLERS</option> 
    <option value="KIDS">BEST FOR KIDS</option> 
    <option value="ALL">BEST FOR ALL</option> 
</select> 

這裏是過濾器

filterMarkers = function (category) { 
    for (i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     // If is same category or category not picked 
     if (marker.category == category || category.length === 0) { 
      marker.setVisible(true); 
     } 
     // Categories don't match 
     else { 
      marker.setVisible(false); 
     } 
    } 
} 

但是第二標記過濾器將不能跨功能我嘗試了很多嘗試。是否有可能從2個下拉列表中篩選出來，還是有其他策略可以嘗試？

鏈接的jsfiddle幾乎有我最好的嘗試，但我不是在JavaScript的非常嫺熟尚未所以我希望得到一個小的小項目一些指導對我太太的媽媽羣

Answer 1

你忘了兩件事情：

1.You忘記添加categorybs的標記，你只加了category：

marker1 = new google.maps.Marker({ 
     title: title, 
     position: pos, 
     category: category, 
     categorybs: categorybs, //add this line 
     map: map 
    }); 

2.您filterMarkersBS功能與category的工作，而不是categorybs。你需要像這樣更新：

filterMarkersBS = function (categorybs) { 
    for (i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     // If is same category or category not picked 
     if (marker.categorybs == categorybs || categorybs.length === 0) { 
      marker.setVisible(true); 
     } 
     // Categories don't match 
     else { 
      marker.setVisible(false); 
     } 
    } 
} 

工作代碼：

var gmarkers1 = []; 
 
var markers1 = []; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    content: '' 
 
}); 
 

 
// Our markers 
 
markers1 = [ 
 
    ['0', 'Cascade Park - 130 Lynn Dr, Hudson, OH 44236', 41.234830, -81.453479, 'KIDS', 'BSNO'], 
 
    ['1', 'Hudson Springs Park - 7095 Stow Rd, Hudson, OH 44236', 41.250798, -81.407120, 'BABIES', 'BSYES'], 
 
    ['2', 'Middleton Park - 1708 Middleton Rd, Hudson, OH 44236', 41.268963, -81.450649, 'ALL', 'BSNO'] 
 
]; 
 

 
/** 
 
* Function to init map 
 
*/ 
 

 
function initialize() { 
 
    var center = new google.maps.LatLng(41.234830, -81.453479); 
 
    var mapOptions = { 
 
     zoom: 12, 
 
     center: center, 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    for (i = 0; i < markers1.length; i++) { 
 
     addMarker(markers1[i]); 
 
    } 
 
} 
 

 
/** 
 
* Function to add marker to map 
 
*/ 
 

 
function addMarker(marker) { 
 
    var category = marker[4]; 
 
    var categorybs = marker[5]; 
 
    var title = marker[1]; 
 
    var pos = new google.maps.LatLng(marker[2], marker[3]); 
 
    var content = marker[1]; 
 

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

 
    gmarkers1.push(marker1); 
 

 
    // Marker click listener 
 
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) { 
 
     return function() { 
 
      console.log('Gmarker 1 gets pushed'); 
 
      infowindow.setContent(content); 
 
      infowindow.open(map, marker1); 
 
      map.panTo(this.getPosition()); 
 
     } 
 
    })(marker1, content)); 
 
} 
 

 
/** 
 
* Function to filter markers by category 
 
*/ 
 

 
filterMarkers = function (category) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
     marker = gmarkers1[i]; 
 
     // If is same category or category not picked 
 
     if (marker.category == category || category.length === 0) { 
 
      marker.setVisible(true); 
 
     } 
 
     // Categories don't match 
 
     else { 
 
      marker.setVisible(false); 
 
     } 
 
    } 
 
} 
 

 
filterMarkersBS = function (categorybs) { 
 
    for (i = 0; i < markers1.length; i++) { 
 
     marker = gmarkers1[i]; 
 
     // If is same category or category not picked 
 
     if (marker.categorybs == categorybs || categorybs.length === 0) { 
 
      marker.setVisible(true); 
 
     } 
 
     // Categories don't match 
 
     else { 
 
      marker.setVisible(false); 
 
     } 
 
    } 
 
} 
 

 
// Init map 
 
initialize();

#map-canvas { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
     <script type="text/javascript"> 
 
     google.load("maps", "3",{other_params:"sensor=false"}); 
 
     </script> 
 
<div id="map-canvas"></div> 
 
<select id="type" onchange="filterMarkers(this.value);"> 
 
    <option value="">BEST FOR (SHOW ALL)</option> 
 
    <option value="BABIES">BEST FOR BABIES</option> 
 
    <option value="TODDLERS">BEST FOR TODDLERS</option> 
 
    <option value="KIDS">BEST FOR KIDS</option> 
 
    <option value="ALL">BEST FOR ALL</option> 
 
</select> 
 
<br> 
 
<select id="type" onchange="filterMarkersBS(this.value);"> 
 
    <option value="">BABY SWINGS (SHOW ALL)</option> 
 
    <option value="BSYES">HAS BABY SWINGS</option> 
 
    <option value="BSNO">DOES NOT HAVE BABY SWINGS</option> 
 
</select>