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]
    });
  }
}