单击特定标记时打开覆盖？

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 event handler, looking at _source 但这是最好的方法吗？这个答案快八岁了。

就打开叠加层而言...Leaflet enable all overlays by default 会 $(".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;
    }
  });
});

单击特定标记时打开覆盖？

turning on overlay when a specific marker is clicked on?

leaflet

Working codesandbox