Ionic2系列——在Ionic2中使用高德地图

以前讲过了如何在Ionic2中使用第三方库，由于第三方库必须针对TypeScript提供相应的声明文件——即d.ts文件，才能被TypeScript正确识别并编译。好在大多数的第三方库已经有了定义文件，可直接经过如下命令安装：

npm install @types/theLibraryName --save

这样就能够解决大多数第三方库的引入问题，如上一篇博客中提到的ECharts组件。

 

那么若是某个第三方库没有对应的d.ts怎么办呢？除了本身手写d.ts以外，TypeScript也提供了一种比较宽泛的方式来识别js代码中的变量及方法，可是缺点是失去了智能感知的特性。好比要使用高德地图的SDK，经查看高德地图的文档：http://lbs.amap.com/api/javascript-api/summary/ ，发现使用方法是这样的：

 

第一步，注册高德开发者；第二步，去控制台建立应用；第三步，获取Key。

接下来须要引入高德地图SDK的JS：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

这个js是动态加载的，npm中也没有对应的d.ts，若是按照文档下面的步骤直接使用AMap对象，就会编译失败，找不到这个对象。因此在使用AMap以前，必须声明它。下面演示一下在Ionic2中使用高德地图SDK的方法。

 

1、新建Ionic2应用并引入高德JS

首先新建一个Ionic2应用。使用如下命令来建立一个新项目：

ionic start MapDemo --v2

打开src目录下的index.html， 在head标签中添加如下代码，引入js:

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

注意，该js必须放在如下代码的前面：

<script src="build/main.js"></script>

否则在使用的时候还没找到AMap对象，仍是会报错。

2、建立地图容器

打开home.html，在home页面里你想展现地图的地方建立一个div 容器，并指定id标识:

<div id="container"></div> 

给地图容器指定大小，能够使用CSS为地图容器设置合适的大小，好比:

#container {width:300px; height: 180px; }

也能够直接写：

<div id="container" style="height: 600px;"></div>

3、声明AMap对象并建立地图

打开home.ts，在构造函数前添加一个变量：

public map: any;

TypeScript中any真是个颇有用又没那么好用的东西，任何不知道具体类型的东西均可以声明为any类型，可是这样就失去了智能感知的特色。没办法这里只能声明为any了。接下来添加一个loadMap方法：

loadMap() { this.map = new AMap.Map('container', { resizeEnable: true, zoom: 8, center: [116.39,39.9] }); }

并调用该方法：

ionViewDidLoad() { this.loadMap(); }

若是这时候编译的话，就会报错，找不到AMap对象，TypeScript不认识这个东西。因此须要对其进行声明。

打开src目录下的declarations.d.ts文件，这里就是写类型定义的地方，里面有一段注释，大意以下：

声明文件是TypeScript编译器如何知道一个对象的类型的方式。它们将让TypeScript认识全部的代码并提供智能感知。

下面声明的通配符* 模块容许在App中使用第三方库，即便它们没有提供类型声明文件。

咱们能够把高德JS的声明写在这里。在下面添加如下代码：

declare var AMap;

便可正常显示地图了：