ionic4引入高德地图

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

2.在index.html中引入高德地图ionic4引入高德地图_第1张图片

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 
}

就成功啦~

 

ionic4引入高德地图_第2张图片

你可能感兴趣的:(ES6)