在Angular项目中使用Leaflet和Leaflet Extra Markers的解决方法如下:
npm install leaflet leaflet-extra-markers
angular.json
文件中的scripts
和styles
数组中添加以下引用:"scripts": [
"./node_modules/leaflet/dist/leaflet.js",
"./node_modules/leaflet-extra-markers/dist/js/leaflet.extra-markers.js"
],
"styles": [
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-extra-markers/dist/css/leaflet.extra-markers.css"
]
import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-extra-markers';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
map: L.Map;
markers: L.Marker[];
ngOnInit() {
this.initMap();
this.addMarkers();
}
initMap() {
this.map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(this.map);
}
addMarkers() {
const icon = L.ExtraMarkers.icon({
icon: 'fa-coffee',
markerColor: 'blue',
shape: 'circle',
prefix: 'fa'
});
this.markers = [
L.marker([51.5, -0.09], { icon: icon }).addTo(this.map),
L.marker([51.51, -0.1], { icon: icon }).addTo(this.map),
L.marker([51.49, -0.1], { icon: icon }).addTo(this.map)
];
}
}
这样,你就可以在Angular项目中使用Leaflet和Leaflet Extra Markers了。这个示例中,我们在地图上添加了三个标记,并使用了Leaflet Extra Markers的自定义图标样式。你可以根据自己的需求修改和扩展这个示例。