如何将开关(输入复选框)绑定到leaflet.js中的互斥(输入收音机)？

Question

有三组标记物(杂货店、服装店、药店)。他们每一个都来自不同的公司。我需要在地图上展示商店和他们的公司。当切换到商店时，只显示选定的公司。也就是说，在选择存储时，不应该显示其他存储。输入收音机-> (杂货店、服装店、药店)，输入复选框-> (company1，company2，.)。我如何才能做到，当选择，例如，“服装店”，只有服装店公司有一个可选的公司选择？

Answer 1

下面是一个例子：https://codesandbox.io/s/billowing-cache-805g6?file=/index.html

本例使用按钮，但如果您愿意使用这些按钮，则可以轻松地将它们切换到单选按钮。

代码很简单。一个页面加载，它创建地图。我定义了一个属于公司的静态对象数组，每个公司都按存储类型包含对象(您的对象可能是不同的)。

doLoadCompany函数接受公司的id，如果匹配，它将遍历该公司的杂货店对象，并将标记加载到地图上。不过，在新的杂货店装货之前，如果有这样的公司，它就会清理掉以前装好的那家公司。

这是一个简单的例子。它可能会变得更加复杂，取决于您的对象，或者它可能再次变得更简单，取决于您的对象。基本原则是确定一种方法来识别您希望为之加载数据的公司，然后加载该数据。如果您是从API中这样做的，我将只返回特定公司所需的数据，然后循环遍历数据集，并根据它们的坐标绘制标记。