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>