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

yan_xiaodi發表於2017-01-12
地圖

之前講過了如何在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的方法。

 

一、新建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物件，還是會報錯。

二、建立地圖容器

開啟home.html，在home頁面裡你想展示地圖的地方建立一個div 容器，並指定id標識:

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

給地圖容器指定大小，可以使用CSS為地圖容器設定合適的大小，比如:

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

也可以直接寫：

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

三、宣告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;

即可正常顯示地圖了：

相關文章