如何将传单路由机导入Ionic2项目? [英] How to import leaflet-routing-machine into an Ionic2 project?

问题描述

我不太了解如何将LRM导入ts文件.通过npm install leaflet-routing-machine安装后，我这样定义了路由:

I don't quite get how to import LRM into a ts file. After installing via npm install leaflet-routing-machine, I defined Routing like this:

var Routing = require('leaflet-routing-machine');
var newRoute = Routing.control({Options});

对我没有帮助的我得到了

which didn't help me and I got:

Error caused by: Routing.control is not a function

这是我的离子信息:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
Node Version: v6.3.1

顺便说一句，传单本身没有任何问题.

BTW, I don't have any problem with leaflet itself.

推荐答案

我们通过在声明组件之前添加以下行来解决此问题.

We solved this problem by adding the following line before declaring our component.

declare var L: any;

myclass.component.ts

import { Component, OnInit } from '@angular/core';
...

// Leaflet and Leaflet Routing Machine have been installed with npm
import 'leaflet-routing-machine';
import 'leaflet-easybutton';

// Add this line to remove typescript errors
declare var L: any;

@Component({
  ...
})
export class MyClass extends OnInit {
  ...

  constructor(...) {
    ...
  }

  ngOnInit() {

    ...

    // The example snippet is now working
    L.Routing.control({
      waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
      ]
    }).addTo(myMap);

    ...

  }

  ...

}

As mentioned in this post, typescript seems to be causing problems to add properties to the global L object of Leaflet, but in our case declaring L of type any was enough to make it work.

这篇关于如何将传单路由机导入Ionic2项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！