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;

便可正常顯示地圖了：