ionic4引入高德地图

292 阅读1分钟

1.首先你要有一个高德地图的key

2.在index.html中引入高德地图

3.文件中写

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 } 就成功啦~