我使用 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;
}
TS
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放置在全局styles.css上:
const myIcon = L.icon({
// place your icon url
iconUrl: 'https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18d8480878d8495a1d0cfd2cfd5" rel="noreferrer noopener nofollow">[email protected]</a>/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()});
关于javascript - CSS 与 LeafLet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52226919/