我正在使用ngx-leaflet插件制作传单。我已经设置了基本层,并为leafletMapReady
事件添加了一个侦听器。在处理程序中,我尝试添加一个标记和一个自定义弹出窗口。处理程序的代码如下:
initMarkers(map: L.Map) {
let m = this.markers[0];
L.marker(L.latLng(m.lat, m.lon)).addTo(map).bindPopup(`<b style='color: red'>${m.num}</b>`).addTo(map);
}
其中m
是对象{lat, lon, num}
。在我的HTML中,我有:
<div style="height: 550px"
leaflet
[leafletOptions]="options"
[leafletLayersControl]="layersControl"
(leafletMapReady)="initMarkers($event)"
></div>
打开地图时,没有标记。我检查了控制台和编译日志,没有错误。我在做什么错了?
编辑1
根据@reblace的建议,我尝试将标记标记为单独的数组。这是我的代码:
map-widget.component.html
<div style="height: 550px"
leaflet
[leafletOptions]="options"
[leafletLayersControl]="layersControl"
[leafletLayers]="markers"
(leafletMapReady)="initMarkers($event)"
></div>
map-widget.component.ts
import { Component, OnInit, Input } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'sultana-map-widget',
templateUrl: './map-widget.component.html',
styleUrls: ['./map-widget.component.css']
})
export class MapWidgetComponent implements OnInit {
@Input() respMarkers: any;
markers: Array<L.Layer> = [];
homeCoords = {
lat: 23.810331,
lon: 90.412521
};
options: any;
layersControl: any;
constructor() {
}
ngOnInit() {
this.options = {
layers: [
(L as any).tileLayer(
'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}',
{
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 15,
ext: 'png'
}
)
],
zoom: 7,
center: L.latLng(this.homeCoords.lat, this.homeCoords.lon)
};
this.layersControl = {
baseLayers: {
"Open Street Map": L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ maxZoom: 15, attribution: '' }
),
"Stamen Terrain": this.stamenMap('terrain'),
}
};
}
stamenMap(type: string) {
return (L as any).tileLayer(
`https://stamen-tiles-{s}.a.ssl.fastly.net/${type}/{z}/{x}/{y}.{ext}`,
{
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 15,
ext: 'png'
}
);
}
initMarkers(map: L.Map) {
// respMarkers is an array of market lat-lng and resp info
console.log('Setting up markers');
let layers: Array<L.Layer> = [];
let rm = this.respMarkers[0];
let l = L.marker(L.latLng(rm.lat, rm.lon)).bindPopup(`<b style='color: red; background-color: white'>${rm.num}</b>`);
this.markers.push(l);
//map.addLayer(L.marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`));
//let l = new L.Marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`).addTo(map);
//map.addLayer(l);
/*for(let rm of this.respMarkers) {
let latLng = L.latLng(rm.lat, rm.lon);
console.log(latLng);
layers.push(new L.Marker(latLng).bindPopup(`$`));
}
L.layerGroup(layers).addTo(map);*/
}
}
我不知道如何调试地图;我同时使用了Firefox和chrome,并检查了日志,没有错误
答案 0 :(得分:1)
由于在Webpack捆绑过程中会出现一些问题,因此在创建标记时需要指定标记图标。
因此您需要使用L.icon指定标记图标:
markerIcon = {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
// specify the path here
iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
})
};
然后例如通过将markerIcon作为第二个参数传递来创建标记:
L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
.addTo(this.map)
.bindPopup(popupInfo);
同时将标记添加到地图并绑定弹出窗口