ionic4引入高德地图

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 
}

就成功啦~

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值