在传单中的地图和标记之间放置徽标

Question

我有一个 Web 应用程序，上面有整页 Leaflet 地图和静态徽标，如下面的代码片段所示。

通过此实现，徽标将漂浮在所有地图元素之上。在实际应用中，最好将标识放在地图和地图上的标记之间。这样在平移地图的时候logo就不会隐藏标记了。

到目前为止我尝试了什么：

简单地修改 z-index 是行不通的，因为 Leaflet 将图块、标记和其他地图元素组合在一个 div.
我还玩过 Panes 并且能够将徽标放置在地图和标记之间的自定义窗格中。但这样一来，标志就不再是静止不动的了，它会随着地图移动。

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
L.marker([51.5, -0.09]).addTo(map);
map.setView([51.505, -0.09], 13);

html, body {
  margin: 0;
}

#map {
  width: 100vw;
  height: 100vh;
}

#logo {
  padding: 20px;
  position: absolute;
  z-index: 500;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 300px;
  max-width: 50%;
  color: #255c99;
  background-color: #7ea3cc;
  border: 2px solid #255c99;
  text-align: center;
}

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<div id="map">
  <div id="logo">Logo</div>
</div>

Answer 1

如 Ivan Sanchez 在评论中所述，在 Leaflet 中无法在地图和标记之间放置静态徽标。

我能想到的唯一解决方案是将徽标放在 Pane 中，并用 JavaScript 补偿地图的缩放和平移。但我想那会很不稳定。

在传单中的地图和标记之间放置徽标

Place Logo between Map and Markers in Leaflet

html

javascript

css

maps

leaflet