谷歌地图-基于JavaScript对象过滤结果

所以我有一个谷歌地图，从JSON文件中提取大约185个公司地址和信息，我已经得到了一切工作，但我想做的是过滤结果，当你"勾选"一个单选按钮或从选择框中选择一个选项。

这是一个工作柱塞- https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr

这是我的地图代码:

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(58, 16),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
var seg = {
    1:'invesCastProd',
    2:'forged',
    3: 'airframe',
    5: 'corp',
    6: 'structurals'        
}
var comp = {
    1:'structurals',
    2:'airfoils',
    3: 'airfoils',
    4: 'wyman',
    5: 'energy',
    6: 'strucComp',
    7: 'mechHard',
    8: 'engineProd',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'specMetals'
}
$.getJSON("locations.json", function(json1) {
  $.each(json1, function(key, data) {
    var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng
    });
    marker.setMap(map);
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
      if (infoWindow) {infoWindow.close();}
      infoWindow = new google.maps.InfoWindow({
        content: "<h5>" + data.display_name + "</h5>" +
        "<div>" + data.street+ "</div>" +
        "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
        "<div><strong>" + seg[data.segment_id] + "</strong></div>" +
        "<div><strong>" + comp[data.component_id] + "</strong></div>" +
        "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
        "<a href=" + data.web_url + ">Website</a>"
      });
      infoWindow.open(map, marker);
      map.setZoom(15);
      map.panTo(this.getPosition());
    });
    //############################################
    //       I don't know what to add here
    //############################################
    filterMarkers = function(){
    }
  });
});
// Init map
initialize();

下面是HTML:

<div class="mapWrap">
  <div id="map-canvas"></div>
  <div class="investCast">
    <select id="pccLoc" onchange="filterMarkers(this.value);">
    <option selected="selected" disabled="disabled" value="">Please select category</option>
    <option class="optGroup" value="corp">PCC Corporate</option>
    <option class="optGroup" value="invesCastProd">Investment Cast Products</option>
    <option class="optChild" value="structurals"> - PCC Structurals</option>
    <option class="optChild" value="airfoils"> - PCC Airfoils</option>
    <option class="optGroup" value="forged">Forged Products</option>
    <option class="optChild" value="wyman"> - Wyman-Gordon</option>
    <option class="optChild" value="energy"> - PCC Energy Group</option>
    <option class="optChild" value="timet"> - Titanium Metals Corp. (TIMET)</option>
    <option class="optChild" value="specMetals"> - Special Metals Corp. (SMC)</option>
    <option class="optGroup" value="airProd">Airframe Products</option>
    <option class="optChild" value="fasteners"> - PCC Fasteners</option>
    <option class="optChild" value="aero"> - PCC Aerostructures</option>
    </select>
  </div>
</div>
<div class="mapSelWrap">
  <div class="corpSel optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="corp" /> PCC Corporate Headquarters</div>
  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="invesCastProd" /> Investment Cast Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="structurals" /> PCC Structurals</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airfoils" /> PCC Airfoils</div>
    </div>
  </div>
  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="forged" /> Forged Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="wyman" /> Wyman-Gordon</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="energy" /> PCC Energy Group</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="timet" /> Titanium Metals Corp.</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="specMetals" /> Special Metals Corp.</div>
    </div>
  </div>
  <div class="selInnerWrap">
    <div class="selInner">
      <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airframe" /> Airframe Products</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="fasteners" /> PCC Fasteners</div>
      <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="aero" /> PCC Aerostructures</div>
    </div>
  </div>
</div>

我要做的是创建一个"filterMarkers"函数，当你选择和选择或勾选一个单选按钮，过滤基于segment_id和component_id的引脚(这只是数字，你可以在plunk的JSON文件中看到)。

并且您也可以在JavaScript文件中的plunk (https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr)中看到，我已经用我的"过滤器"创建了两个对象(var = seg{}， var = comp{})，我已经与JSON文件中的数字匹配。它是工作的，因为当你点击一个大头针和信息窗口弹出粗体的文本是与位置相关联的过滤器。我还根据HTML元素中的过滤器设置了相应的值。

那么我现在如何根据对象变量过滤这些结果呢?我对这个想法和代码非常了解，我只是停留在过滤部分。

我真的不知道该在过滤器函数中添加什么:

filterMarkers = function(){
}

谢谢你的帮助!