使用 OpenStreetMap 的传单地图中的 SCSS 样式问题

Question

使用 OpenStreetMap 的 Leaflet 地图中的 SCSS 样式问题

我正在使用 OpenStreetMap 和 Leaflet 在地图上绘图。我有一个函数

updateMarkers()

可以清除现有标记并根据过滤的位置列表创建新标记。当我直接在 TypeScript 代码中包含标记的附加 HTML 样式时，如下所示：

// TypeScript code
const numberHTML = `<div class="number-marker" 
   style="background-color: #ff0000;
   color: #ffffff; 
   border-radius: 50%; 
   width: 38px; 
   height: 38px; 
   display: flex; 
   align-items: center; 
   justify-content: center;
   ">${index + 1}</div>`;

然后将标记添加到地图上，它按预期工作。

但是，当我简化 HTML 并将样式移至 SCSS 文件时，如下所示：

// TypeScript 代码

// TypeScript code
const numberHTML = `<div class="number-marker">${index + 1}</div>`;

在 SCSS 文件中： //search.component.scss

.number-marker {
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: #00ff00;
    color: #000000;
  }
}

  updateMarkers() {
    // Mevcut markerları temizle
    this.markers.forEach((marker) => marker.remove());
    this.markers = [];
  
    // Yeni markerlar oluştur
    this.filteredLocationList.forEach((park, index) => {
      const latitude = parseFloat(park.lat);
      const longitude = parseFloat(park.lng);
  
      // Rakam içeren HTML oluştur
     const numberHTML = `<div class="number-marker" 
      ">${index + 1}</div>`;
  
      const marker = L.marker([latitude, longitude], {
        icon: L.divIcon({
          html: numberHTML,
          className: 'number-marker-icon',
          iconSize: [38, 38],
        }),
      }).addTo(this.map);
  
      this.markers.push(marker);
    });
  }

SCSS 样式似乎不适用。我无法理解为什么 SCSS 代码在这种情况下不起作用。任何见解将不胜感激！

为什么我的 SCSS 文件在直接编写 CSS 时不起作用，但在 HTML 中内联添加 CSS 样式时却起作用？

Answer 1

我将分享一个网站，其中包含与 Leaflet 相关的示例项目，该网站由众多项目精心制作。您可以根据您的需求定制并将它们集成到您自己的项目中。

所有项目：https://leafletjs.com/examples.html

我使用了这个项目https://leafletjs.com/examples/choropleth/