在 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: Type '{ styles: { color: string; opacity: number; weight: number; }[]; }' is missing the following properties from type 'LineOptions': extendToWaypoints, missingRouteTolerance

对于createMarker，它表示如下，

TS2345: Argument of type '{ router: MapBox; waypoints: LatLng[]; show: false; createMarker: () => null; }' is not assignable to parameter of type 'RoutingControlOptions'. Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.

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

Answer 1

createMarker 在 RoutingControlOptions 上不存在。从对象中删除它。

但是，有一个 plan: Plan 成员，可以将其中的一个 PlanOptions 传递给包含 createMarker.

的构造函数

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

的 0

JavaScript 实现可能会忽略未知，并且对您传递的选项对象中未定义的键值具有合理的默认值。但是，TypeScript 定义更为严格。也有可能是打错了。

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

Missing properties error when using Leaflet in Angular

angular

typescript

leaflet

leaflet-routing-machine