单击特定标记时打开覆盖

Question

我的地图中有多个覆盖层，默认情况下都被禁用：

var overlays = {
'Overlay #1': overlay1,
'Overlay #2': overlay2,
'Overlay #3': overlay3
};
L.control.layers(baseMaps, overlays).addTo(mymap);

我想这样做，当你点击一个特定的标记时，就会出现overlay2。我希望它在"图层控制"对话框中显示为选中状态，并希望它也显示在地图上。我不太清楚的是(1(如何使其在打开特定弹出窗口或单击特定标记时运行javascript；(2(如何打开我所描述的覆盖。

这是我的标记代码：

L.marker({lat: 30.266293, lon: -97.656965}, {icon: myIcon})
.addTo(mymap)
.bindPopup("<b>Hello world!</b>");

我想我可以使用popupopen事件处理程序，查看_source，但这是最好的方法吗？这个答案已经快八年了。

就打开叠加而言。。。传单默认启用所有覆盖$(".leaflet-control-layers-overlays label input").trigger('click')，但这看起来会打开所有覆盖，而不仅仅是其中一个。我想我可以做.eq(1)或类似的事情，但这看起来非常不雅。

有什么想法吗？

Answer 1

您可以点击L.marker的on事件，捕捉点击，并执行某种操作。假设我们设置了一组相关的标记和覆盖：

// some markers
var littleton = L.marker([39.61, -105.02])
.bindPopup("This is Littleton, CO.")
.addTo(map),
denver = L.marker([39.71, -105.12])
.bindPopup("This is Denver, CO.")
.addTo(map);
// some overlays:
const overlay1 = L.imageOverlay(imageUrl, [
[39.61, -105.02],
[39.71, -105.12]
]).addTo(map);
const overlay2 = L.imageOverlay(imageUrl, [
[39.71, -105.12],
[39.81, -105.22]
]).addTo(map);

我们可以将叠加添加到图层控制中：

var overlayMaps = {
Overlay1: overlay1,
Overlay2: overlay2,
};
L.control.layers(null, overlayMaps).addTo(map);

然后，我们可以创建一个对象，将每个标记与覆盖相关联，并跟踪其当前是否在地图上：

const markerslayers = [
{
marker: littleton,
overlay: overlay1,
onmap: true
},
{
marker: denver,
overlay: overlay2,
onmap: true
}
];

对于每个标记，我们可以创建一个onclick事件来打开或关闭其关联的覆盖：

markerslayers.forEach((mlayer) => {
mlayer.marker.on("click", () => {
if (mlayer.onmap) {
mlayer.overlay.remove();
mlayer.onmap = false;
} else {
mlayer.overlay.addTo(map);
mlayer.onmap = true;
}
});
});

工作代码沙箱