Question

我正在创建Google Maps过滤器，我想从JSON中获取具有多个条件的位置，并希望将来添加更多过滤器字段，以允许在我的地图中搜索位置。

我创建了一个用于获取所有位置的测试提琴，但是在主题中仅找到了一个要搜索的特定条件。

现在它仅适用于国家/地区，但我想搜索所有过滤器字段。

var JSON = "https://raw.githubusercontent.com/rhcarlosweb/google-maps-multi-filter-jquery/master/stores.json";

$.getJSON(JSON, function(stores) {
  $.each(stores, function(i, store) {
    var title = store.name;
    var country = store.location.country.name;
    var city = store.location.city.name;
    var district = store.location.district.name;
    var type = store.type.name;

    $("#results").append(title + "<br>" + country + "<br>" + city + "<br>" + district + "<br>" + type + "<br><br>");
  });
});

$("#filter").click(function() {
  $("#results").text("");

  var formObj = {};
  var inputs = $('#mapFilter').serializeArray();
  $.each(inputs, function(i, input) {
    if (input.value != "") {
      formObj[input.name] = input.value;
    }
  });
  if (Object.getOwnPropertyNames(formObj).length !== 0) {
    getJSON(formObj);
  }
});

function getJSON(values) {
  var city = values.filter_country;
  console.log(city);

  $.getJSON(JSON, function(stores) {
    $.each(stores, function(i, store) {
      if (store.location.country.name == city) {
        var title = store.name;
        $("#results").append(title + "<br><br>");
        return;
      }
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Filter
<form id="mapFilter">
  <input type="text" name="filter_key" id="keyword" />
  <select name="filter_country">
    <option>Brasil</option>
    <option>Estados Unidos</option>
  </select>
  <select name="filter_city">
    <option>Dighton</option>
    <option>Goiânia</option>
    <option>Nova Friburgo</option>
    <option>Petrópolis</option>
    <option>Fortaleza</option>
  </select>
  <input type="text" name="filter_district" id="district" />
</form>
<button id="filter">Filter</button>

<br /><br /> Locations
<div id="results"></div>

这是我的JSFiddle

Answer 1

从我帖子的评论中，我找到了解决问题的方法。在提交标记数组并过滤表单之后，通过此代码过滤我的标记

其中
markers是来自JSON的推送标记
filter是formObj，来自小提琴

locations = markers.filter(function(item) {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
    return false;
  }
  return true;
});

console.log(locations);

通过多个条件过滤JSON结果

1 个答案: