将全局javascript UI库集成到Angular应用程序中

时间:2017-06-22 13:22:05

标签: angular

我必须在Angular应用程序(Angular4.x)中使用mapwize sdk(https://github.com/Mapwize/mapwize.js-dist/blob/master/doc/doc.md#_install-mapwize),一个纯javascript库。

我试图在index.html中添加一个脚本标记以包含库(js和css)并添加一些脚本来显示MapWize地图,如下所示,我已经显示了地图:

<head>    
    <link rel="stylesheet" href="./assets/bower_components/mapwize/dist/mapwize.css">
    <script src="./assets/bower_components/mapwize/dist/mapwize.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>
    <script>   
        var bounds = new L.LatLngBounds(
            new L.LatLng(49.742313935073504183, 4.5989323407411575317),
            new L.LatLng(49.742851692813445652, 4.5997658371925345122)
        );
        var map = Mapwize.map('map', {
            apiKey: '1f04d780dc30b774c0c10f53e3c7d4ea', 
            accessKey: 'demo'                
        });
        map.fitBounds(bounds);
    </script>
</body>

我现在想要的是将地图集成到应用程序中的组件中,我不知道如何做到这一点,这可能吗?有人遇到过类似的问题吗?

1 个答案:

答案 0 :(得分:1)

在您的组件/服务之外执行此操作

declare const Mapwize; 


@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}.
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})

export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Max'
  }
  abc() {
    //Mapwise...()
  }
}

你应该可以使用它