传单标记过滤

Question

我有传单地图，显示 30-50 个不同的标记。在地图下方，我有一个简单的 HTML 表单，用于过滤。

用户将选择过滤器（例如：“城市”和“id”）。然后地图应该只显示满足这两个过滤器的标记。所有其他标记都应删除。

我想这样做的逻辑是这样的：

设置过滤器后，搜索标记的 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"}
];

我没有包含其余代码，因为它是标准传单代码，因此为了保持紧凑。

Answer 1

您应该使用Array.prototype.filterID方法使用and过滤初始城市数组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 && city.id === selectedId});console.log( filteredList );