本文总阅读量:  次 | 文章总字数: 770 字

在 Ionic2 TypeScript 项目中导入第三方 JS 库

本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考。

1. Typings 的方式

因在 TypeScript 中引用之前的 JS 库还需要引入对应的类型定义,也就是 .d.ts 文件。对于一些流行的 JS 库,相应地有了一个 Typings 库。Typings 库的作用就是将一些现有的 JS 库生成好了对应的定义文件,可以通过 Typings 直接加载到项目中。详细可见 Typings for NPM Packages

2. 其他第三方 JS 库的引用

这里以国内的百度地图库作为示例进行说明。
百度地图在 TypeScript 中是不存在的,所以本文就看看如何在 Ionic2 的 TypeScript 项目中引用。

3. 项目中引用 JS 库

和一般的引用 JS 库一样,直接在项目的 index.html 中引用即可。
这里申请好百度地图的 key 并引入百度地图的 JS SDK 文件。

截图

4. 全局对应的定义与使用

在引用了百度地图 SDK 后,在 console 中发现已经可以读取到百度地图中的全局参数定义了。

截图

那么只需要在对应的 TS 文件中定义一个参数即可。


declare var BMap;

定义好后在文件中就可以直接使用百度地图 JS SDK 的所有功能了。

import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var BMap;

@Component({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {

  @ViewChild('container') mapElement: ElementRef;
  container: any;

  constructor(private navCtrl: NavController) {
    
  }

  ionViewLoaded() {
    this.loadMap();
  }

  loadMap() {
    var map = new BMap.Map(this.mapElement.nativeElement);          // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
    map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别
    //创建小狐狸
    var pt = new BMap.Point(116.404, 39.915);
    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
    var marker2 = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
    map.addOverlay(marker2);              // 将标注添加到地图中
  }
}

对应的 HTML 页面代码如下。


<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic - 地图
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="map">
  <div #container id="container" class="mapContainer"></div>
</ion-content>

效果如下。

截图

EOF

转载须以超链接形式标明文章原始出处和作者信息