在 Angular 中使用 Leaflet 时缺少属性错误

Question

我正在尝试使用 Leaflet 和 Leaflet Routing Machine。我使用以下命令安装传单和传单路由机，

npm i leaflet
npm i --save-dev @types/leaflet

npm i leaflet-routing-machine
npm i --save-dev @types/leaflet-routing-machine

导入传单并使用它很好，但是当我尝试使用传单路由机器时它给了我错误。

以下是我的代码，

L.Routing.control({
    waypoints: [
      L.latLng(latitude, longitude),
      L.latLng(latitude, longitude),
    ],
    show: false,
    lineOptions: {styles: [{color: randomColor, opacity: 1, weight: 5}],},
    createMarker: function () {
      return null;
    },
    }).addTo(this.map);

我使用 webstorm 作为 IDE，lineOptions 和 createMarker 出现 2 个错误。我在纯 JavaScript 中有相同的代码，它工作正常，但对于 Angular，它给了我这个错误。

对于lineOptions，它说如下，当我添加那些缺少的参数时，错误消失了，但我不想放那些参数。

TS2739：类型 '{ 样式：{ 颜色：字符串；不透明度：数字；重量： 数字; }[]; }' 缺少类型中的以下属性 'LineOptions'：extendToWaypoints，missingRouteTolerance

对于createMarker，它说如下，

TS2345: '{ router: MapBox; 类型的参数航路点：LatLng[];节目： 错误的; createMarker: () => null; }' 不能分配给参数 键入“路由控制选项”。对象字面量只能指定已知 属性，并且类型中不存在“createMarker” 'RoutingControlOptions'。

既然它在 JavaScript 中工作，为什么它不能在 Angular 中工作？

Answer 1

createMarker 在RoutingControlOptions 上不存在。 将其从对象中移除。

但是，有一个 plan: Plan 成员，可以将 PlanOptions 传递给包含 createMarker 的构造函数。

LineOptions 必须定义 extendToWaypoints 和 missingRouteTolerance。 如果您“不想要”它们，请将它们设置为有意义的值 - 例如 false 用于 extendToWaypoints 和 0 用于 missingRouteTolerance。

JavaScript 实现可能会忽略未知，并且对于您传递的选项对象中未定义的键值具有合理的默认值。 但是，TypeScript 定义更加严格。 也有可能是输入不正确。