1.首先你要有一个高德地图的key
2.在index.html中引入高德地图
3.文件中写
<ion-content>
<div #map_container class="map_container"></div>
</ion-content>
4.xxx.page.ts
import { Component , ViewChild, ElementRef} from '@angular/core';
declare var AMap;
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
@ViewChild('map_container') map_container: ElementRef;
map: any;//地图对象
ionViewDidEnter() {
this.map = new AMap.Map(this.map_container.nativeElement, {
view: new AMap.View2D({//创建地图二维视口
zoom: 11, //设置地图缩放级别
rotateEnable: true,
showBuildingBlock: true
})
});
}
}
5.xxx.page.sass
body,.map_container {
width: 100%;
height: 600px;
overflow:hidden;
margin:0;
z-index:1000
}
就成功啦~