Чтобы ваш класс L.Routing не был неопределенным, вам нужно получить ссылку на карту и использовать ее там, когда карта загружена, но перед этим шагом вам нужно настроить angular.json для поиска маркеров в вашей папке ресурсов.значки иначе эта проблема возникает .
import {
latLng,
tileLayer,
Icon, icon, Marker
} from 'leaflet';
import 'leaflet';
import 'leaflet-routing-machine';
declare let L;
...
// Override default Icons
private defaultIcon: Icon = icon({
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
});
ngOnInit() {
Marker.prototype.options.icon = this.defaultIcon;
}
onMapReady(map: L.Map) {
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
routeWhileDragging: true
}).addTo(map);
}
Шаблон
<div style="height: 800px;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)">
</div>
Демо
Обратите внимание, что его библиотека не разрешает неограниченные запросы к серверу , поэтому он часто возвращает 429 HTTP-ответов.