地图上没有可见的标记和弹出窗口
No markers and popup visible on map
我正在使用传单的 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 并检查了日志,没有错误
由于 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);
同时在地图上添加标记并绑定弹窗
我正在使用传单的 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 并检查了日志,没有错误
由于 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);
同时在地图上添加标记并绑定弹窗