css - 将 Leaflet divIcon 标记与动态内容居中

Question

我创建了一个简单的传单 map ，其中包含一些国家的标记。目前所有标记都不是以中间点为中心，而是以左上角为中心。

这是我现在的代码:

const countries = [
  [52.32, 5.55, "🇳🇱 Netherlands"],
  [50.64, 4.67, "🇧🇪 Belgium"],
  [51, 10, "🇩🇪 Germany"],
  [47, 2, "🇫🇷 France"],
  [42.56, 1.56, "🇦🇩 Andorra"],
  [40.2, -3.5, "🇪🇸 Spain"],
  [38.7, -9.18, "🇵🇹 Portugal"],
  [52, 19, "🇵🇱 Poland"],
  [50, 16, "🇨🇿 Czechia"],
  [46.8, 8.23, "🇨🇭 Switzerland"]
];

let map = L.map("map", {
  worldCopyJump: true
}).setView({
  lat: 50,
  lon: 10
}, 5);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  minZoom: 2,
  maxZoom: 10,
  attribution: "&copy; <a href=\"https://openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

L.control.scale().addTo(map);

const regions = L.featureGroup().addTo(map);

countries.forEach((country) => {
  L.marker([country[0], country[1]], {
    icon: L.divIcon({
      iconSize: "auto",
      html: "<b>" + country[2] + "</b>"
    })
  }).addTo(regions);
})

map.addLayer(regions);

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

.leaflet-div-icon {
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px;
  text-align: center;
}

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19757c787f757c6d5928372e3728" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"></script>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fff6f2f5fff6e7d3a2bda4bda2" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>

我的预期结果是所有类名为“leaflet-div-icon”的 div 元素的宽度的一半位于左侧，高度的一半位于上方。例如看安道尔，目前只有标记的左上角点在安道尔境内，其余的都在安道尔之外。我希望标记的中点位于安道尔。

我尝试添加以下代码，但这会将所有标记移动到错误的位置:

.leaflet-div-icon {
    position: relative;
    top: -50%;
    left: -50%;
}

Answer 1

您可以覆盖默认的 .leaflet-div-icon 样式，然后将其子 b 样式设置为您想要的外观和位置:

const countries = [
  [52.32, 5.55, "🇳🇱 Netherlands"],
  [50.64, 4.67, "🇧🇪 Belgium"],
  [51, 10, "🇩🇪 Germany"],
  [47, 2, "🇫🇷 France"],
  [42.56, 1.56, "🇦🇩 Andorra"],
  [40.2, -3.5, "🇪🇸 Spain"],
  [38.7, -9.18, "🇵🇹 Portugal"],
  [52, 19, "🇵🇱 Poland"],
  [50, 16, "🇨🇿 Czechia"],
  [46.8, 8.23, "🇨🇭 Switzerland"]
];

let map = L.map("map", {
  worldCopyJump: true
}).setView({
  lat: 50,
  lon: 10
}, 5);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  minZoom: 2,
  maxZoom: 10,
  attribution: "&copy; <a href=\"https://openstreetmap.org/copyright\">OpenStreetMap</a>"
}).addTo(map);

L.control.scale().addTo(map);

const regions = L.featureGroup().addTo(map);

countries.forEach((country) => {
  L.marker([country[0], country[1]], {
    icon: L.divIcon({
      iconSize: "auto",
      html: "<b>" + country[2] + "</b>"
    })
  }).addTo(regions);
})

map.addLayer(regions);

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

#map .leaflet-div-icon {
  width:0;
  height:0;
  border: 0;
  padding: 0;
}

#map .leaflet-div-icon b {
  display:inline-block;
  padding: 3px;
  border: 1px solid #666;
  border-radius: 3px;
  background:#fff;
  transform:translate(-50%, -50%);
}

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd3daded9d3dacbff8e9188918e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js"></script>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a363f3b3c363f2e1a6b746d746b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>