Javascript 对同一标记进行多层反应

如何在react传单的多个层中添加相同的标记

例如：

我有一个应用程序来搜索带有react传单的餐厅，每个标记都是不同的餐厅。我想要一个

LayerControl

来按类型和评级（1..5星）过滤它们

我可以使用一个

LayerControl.Overlay

来按类型（例如自助餐）进行过滤，但我也希望按评级进行过滤。如果我有一家餐厅类型为“自助餐”且评级为4，那么我如何才能仅在检查自助餐类型和4星级评级时显示标记

这是我的仅按类型筛选的示例

---

我使用的是react传单v3。

创建各种图层组来管理过滤器的方法不是最好的方法。我采取了另一种方法

使用所需的过滤器创建状态对象 在你的应用程序中，创建一个状态变量来保存潜在的过滤器。我们将其设置为最初包含所有选项：

const restaurantTypes=[“家庭风格”、“自助餐”、“快餐”、“咖啡馆”]；
常数评级=[1,2,3,4,5]；
函数App（）{
const[filters，setFilters]=useState({
餐厅类型，
评级
});
...
}

自定义过滤器组件 我选择创建一个自定义组件，它基本上与传单层控件的html标记完全相同，但没有任何功能。您可以在这个答案的末尾查看沙箱，但它所做的只是管理我们刚刚定义的

过滤器

状态变量。以下是一个简短的总结：

constfiltercontrol=（{filters，setFilters}）=>{
返回(
类型
{restaurantTypes.map（（类型）=>(
{
if（过滤器.餐厅类型.包括（类型））{
setFilters（（prevFilters）=>({
…前置过滤器，
restaurantTypes:prevFilters.restaurantTypes.filter(
（f） =>f！==类型
)
}));
}否则{
setFilters（（prevFilters）=>({
…前置过滤器，
restaurantTypes:[…prevFilters.restaurantTypes，type]
}));
}
}}
/>
{type}/span>
))}
评级
{ratings.map（（rating）=>(
//同上，但适用于评级
))}
);
};

因此，现在您的

FilterControl

可以灵活地管理

过滤器的状态

根据过滤器过滤标记
现在，您所要做的就是映射到您的
餐厅
数据集，并且只渲染其
类型
和
评级
在当前
过滤器中的标记：

函数应用程序（）{
const[filters，setFilters]=useState({
餐厅类型，
评级
});
返回(
{restaurants.map（（restaurant）=>{
如果(
过滤器.restaurantTypes.includes（restaurant.type）&&
过滤器.等级.包括（餐厅.等级）
) {
返回
}
返回null；
})}
);
}

到目前为止你试过什么？你有我们可以使用的样本数据集吗？我的建议是不要将同一个标记添加到多个层中，因为它会在同一个点上渲染多个标记，这是对CPU的浪费，并且会放大标记阴影（如果使用一个）。最好创建一个自定义layerscontrol，在单个数据集上应用过滤器，并仅呈现通过过滤器参数的标记。如果您创建了一个示例代码沙盒或codepend，我们可以帮助您更好地实现这一点。感谢您的回答！我在问题中加了一个例子。我不能为同一家餐厅设置多个标记，因为我只想在选中两个过滤器（类型和评级）时显示它。