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