时间戳

首页 > 解决方案 > 当我使用带有角度 7 的传单路由机时，提名是未定义的

angular - 当我使用带有角度 7 的传单路由机时，提名是未定义的

问题描述

你好 ！

我第一次使用带有 Angular 7（typeScript）的Leafletjs库，对于传单路由机器，我使用这个代码块，我有这个错误你知道吗？：

组件.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);

标签： angulartypescriptleafletangular7

解决方案

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

像这样导入：

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);
  }

演示

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

推荐阅读