angular 中地图上未显示传单 divIcon
Leaflet divIcon not displaying on map in angular
我正在尝试在 angular 传单中添加一个 divicon 标记。
component.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;
}
component.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);
我在控制台中没有收到任何错误,但无法在地图上查看标记。
它适用于带有 css 和 js 的基本 html 页面,但不适用于 angular。
我是不是漏掉了什么?
我不确定为什么它对你不起作用,但你需要将代码 放在 ngOnInit 生命周期钩子中 和 L.divIcon class 选择器样式内部全局 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;
}
我正在尝试在 angular 传单中添加一个 divicon 标记。
component.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;
}
component.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);
我在控制台中没有收到任何错误,但无法在地图上查看标记。
它适用于带有 css 和 js 的基本 html 页面,但不适用于 angular。
我是不是漏掉了什么?
我不确定为什么它对你不起作用,但你需要将代码 放在 ngOnInit 生命周期钩子中 和 L.divIcon class 选择器样式内部全局 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;
}