当我将 leaflet-routing-machine 与 angular 7 一起使用时，Nominatim 未定义

Question

您好！

我第一次使用 Leafletjs 库和 Angular 7 (typeScript)，对于传单路由机，我使用这段代码，我有这个错误你知道吗？ :

component.ts :

L.Routing.control({
      waypoints: [L.latLng(48.8534, 2.3488), L.latLng(44.837789, -0.57918),],
      routeWhileDragging: true,
      show: true,
      language: 'fr',
      geocoder: L.Control.Geocoder.nominatim(),
      autoRoute: true
    }).addTo(this.mapInstance);

Answer 1

您收到此错误是因为您尚未导入该库，或者您已导入但它在地图初始化后加载。

像这样导入：

import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import "leaflet-routing-machine";

然后在组件加载后：

ngOnInit() {    
    this.map = L.map("map").setView([51.505, -0.09], 13);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    L.Routing.control({
      waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],
      routeWhileDragging: true
    }).addTo(this.map);
  }

Demo

请注意，由于 API 的限制，您有时应该在隐身浏览器模式下对其进行测试以获取路线。

当我将 leaflet-routing-machine 与 angular 7 一起使用时，Nominatim 未定义

Nominatim is undefined when I use leaflet-routing-machine with angular 7

leaflet

typescript

angular

angular7