Блог

У меня есть карта листовок, которая показывает 30-50 различных маркеров. Под картой у меня есть простая HTML-форма, которую следует использовать для фильтрации.

Пользователи будут выбирать фильтры (например: «Город» и «Идентификатор»). Тогда на карте должны отображаться только маркеры, которые удовлетворяют этим двум фильтрам. Все остальные маркеры должны быть удалены.

Я предполагаю, что логика для этого такова:

После установки фильтра выполните поиск в источнике маркеров в формате json и удалите все, что не запрошено. Но я понятия не имею, как это реализовать. Также как восстановить все маркеры по умолчанию после отклонения фильтра? Также фильтр должен находиться за пределами карты листовок в виде отдельной HTML-формы.

И вот как я инициализирую маркеры

 var city = [
  {name: "City1", loc: [11.111, 22.222], id: "1"},
  {name: "City2", loc: [12.111, 23.222], id: "2"}, 
  {name: "City3", loc: [13.111, 24.222], id: "3"}, 
  {name: "City3", loc: [14.111, 25.222], id: "4"}
];
 

Я не включил остальной код, поскольку это стандартный код листовки, чтобы сохранить его компактным.

Вы должны использовать метод Array.prototype.filter для фильтрации исходного массива городов с использованием ID и name :

 const cities = [
  {name: "City1", loc: [11.111, 22.222], id: "1"},  
  {name: "City2", loc: [12.111, 23.222], id: "2"}, 
  {name: "City3", loc: [13.111, 24.222], id: "3"}, 
  {name: "City3", loc: [14.111, 25.222], id: "4"}
];

let selectedCity = "City2";
let selectedId = "2";

let filteredList = cities.filter( city => {
  return city.name === selectedCity amp;amp; city.id === selectedId
});

console.log( filteredList );