ionic3 使用高德地圖

在app上新增地圖

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申請的高德地圖web端key"></script>

注意，該js必須放在以下程式碼的前面：

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

<ion-content>
  <div 
 
#map_container class="map_container"></div>
</ion-content>

page-home {
  .map_container {
    width: 100%;
height: 100%;
}
}

在xxx.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
declare var AMap;
@Component({
  selector: 'page-home',
templateUrl: 'home.html'
 
})
export class HomePage {
  @ViewChild('map_container') map_container: ElementRef;
map: any;//地圖物件
constructor(public navCtrl: NavController) {
  }

  ionViewDidEnter() {
    this.map = new AMap.Map(this.map_container.nativeElement, {
      view: new AMap.View2D({//建立地圖二維視口
zoom: 11, //設定地圖縮放級別
rotateEnable
 
: true,
showBuildingBlock: true
})
    });
}

}

啟動ionic就可以顯示高德地圖了