ionic3安卓平臺引用高德地圖

1.前置條件

第一步，註冊高德開發者；第二步，去控制檯建立應用；第三步，獲取Key。

2.打開src目錄下的index.html， 在head標籤中添加如下代碼，引入js:

 

 

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

注意，該js必須放在如下代碼的前面：

 

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

 

3.建立容器

在須要顯示地圖的html頁面上添加以下代碼

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

添加樣式文件

#container {width:100%; height: 100%; }

4.聲明AMap對象並建立地圖

在頁面的ts文件中添加以下代碼：

public map: any;//地圖對象

並聲明地圖對象

declare var AMap;

定義一個加載地圖方法

loadMap() {
    this.map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      center: [125.3245, 43.886841]
    });
}

調用這個自定義方法

  ionViewDidLoad() {
    this.loadMap();
    console.log('ionViewDidLoad MapPage');
  }

完整代碼以下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
declare var AMap;
@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})

export class MapPage {
  public map: any;//地圖對象

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.loadMap();
    console.log('ionViewDidLoad MapPage');
  }

  loadMap() {
    this.map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      center: [125.3245, 43.886841]
    });
  }
}