带有 LeafLet 的 CSS答案

【问题标题】：CSS with LeafLet带有 LeafLet 的 CSS
【发布时间】：2019-02-13 01:34:55
【问题描述】：

我使用 Angular 6 和 Leaflet。我不明白为什么不能在我的组件中定义我的 css... 那是我的代码：

HTML

<div class="custom-popup" id="frugalmap">

CSS

.custom-popup .leaflet-popup-content-wrapper {
    background:#2c3e50;
    color:#fff;
    font-size:160px;
    line-height:24px;
    border-radius: 0px;
}

.custom-popup .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
}

.custom-popup .leaflet-popup-tip-container {
    width:30px;
    height:15px;
}

.custom-popup .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
}

var customPopup = "<h4>CHU Nantes</h4>" 
var customOptions = {'className' : 'custom' }
var CHUNantes= L.marker([47.21082, -1.55446], {icon: myIcon}).bindPopup(customPopup,customOptions).on('mouseover', function (e) { this.openPopup();});

【问题讨论】：

你的意思是你不能在组件中定义你的css？您可以使用 styleUrls
我的 css 不工作，你明白为什么了吗？

标签： javascript css angular typescript leaflet

【解决方案1】：

您需要按如下方式定义自定义标记并将css放在全局styles.css上：

const myIcon = L.icon({
     // place your icon url
     iconUrl: 'https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon.png',
     iconSize: [32, 37],
     iconAnchor: [16, 37],
     popupAnchor: [0, -28]
});

const customPopup = "<h4>CHU Nantes</h4>" 
const customOptions = {'className' : 'custom-popup' }
const nantes= L.marker([47.21082, -1.55446], {icon: myIcon}).addTo(map);

nantes.bindPopup(customPopup,customOptions)
      .on('mouseover', function (e) { this.openPopup()});

Demo

【讨论】：