在 Angular 中 Leaflet divIcon 在地图上无法显示

Question

我正在尝试在Angular Leaflet中添加一个divicon标记。

组件.css:

.leaflet-div-icon2
{
    background: #e5001a;
    border:5px solid rgba(255,255,255,0.5);
    color:blue;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    line-height:30px;
}

组件.ts :

var map = L.map('map', {
        attributionControl: false,
        crs: L.CRS.Simple
});

var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('cust_image.png', bounds).addTo(map);
var customMarkerIcon = L.divIcon({className: 'leaflet-div-icon2'});

var m3 = L.latLng([ 348,278.2]);
L.marker(m3, {icon: customMarkerIcon }).addTo(map);

控制台没有显示任何错误，但无法在地图上查看标记。

在基本的HTML页面中使用CSS和JS可以工作，但在Angular中不行。

我是否遗漏了什么？

- semantic_c0d3r

---

我最近遇到了类似的问题。在一个Angular组件中使用divIcon，并尝试在组件的CSS文件中为其添加样式。但是样式无法应用于divIcon。 - Chris Bao

Answer 1

我不确定为什么它不能在你的设备上运作，但你需要将代码放在ngOnInit生命周期钩子中，而L.divIcon类选择器样式放在全局styles.css文件中。这里有一个与你尝试实现的类似例子：

app.ts:

ngOnInit() {
    const map = L.map("map", {
      crs: L.CRS.Simple
    });

    const bounds = [[0, 0], [1000, 1000]];

    map.fitBounds(bounds);

    const image = L.imageOverlay(
      "https://leafletjs.com/examples/crs-simple/uqm_map_full.png",
      bounds
    ).addTo(map);
    const customMarkerIcon = L.divIcon({
      className: "leaflet-div-icon2"
    });

    const m3 = L.latLng([348, 278.2]);
    L.marker(m3, {
      icon: customMarkerIcon
    }).addTo(map);
}

styles.css:

.leaflet-div-icon2 {
  background: #e5001a;
  border: 5px solid rgba(255, 255, 255, 0.5);
  color: blue;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
}

演示

- kboul

---

“L.divIcon类选择器样式在全局styles.css中” - 这解决了它。是否有解释为什么？ - semantic_c0d3r

请查看这个和这个，它们与编程有关。我还修改了演示以实时查看。 - kboul