小编Rob*_*iet的帖子

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

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

这是我现在的代码:

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>" + …
Run Code Online (Sandbox Code Playgroud)

css leaflet

3
推荐指数
1
解决办法
7968
查看次数

标签 统计

css ×1

leaflet ×1