一：key

首先去高德開發者平臺注冊一個賬號，然后在申請一個key

需要注意的是獲取安全碼SHA1和PackageName

1：獲取SHA1

打開cmd，目錄定位在c盤/users/用戶名文件/.android

然后輸入輸入命令

keytool -list -v -keystore debug.keystore

像這樣：

你可能會報錯：密鑰庫文件不存在: debug.keystore，

你可以打開系統User下的.android文件夾，看看有沒有debug.keystore文件，如果沒有這個文件可以看一下下面這個文章

https://blog.csdn.net/zhangxing52077/article/details/53997893

有了debug.keystore文件之后，重新輸入命令

注意，他會提醒你輸入秘鑰庫口令，口令是：android

2：PackageName

packageName這個是包名，在項目里config.xml文件里面獲取

二：代碼

1：在項目src目錄下的index.html頁面引入script

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=你的key"></script>

2:html

<ion-content><div #map_container class="map_container"></div> </ion-content>

3:css

body,.map_container {
width: 100%;
height: 600px;
overflow:hidden;
margin:0;
z-index:1000
}

4:ts

import {AlertController} from '@ionic/angular'; declare var AMap; @Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'] }) export class HomePage {@ViewChild('map_container') map_container: ElementRef;map: any;//地圖對象constructor(public alertController: AlertController) {}ionViewDidEnter() {this.map = new AMap.Map(this.map_container.nativeElement, {view: new AMap.View2D({//創建地圖二維視口zoom: 11, //設置地圖縮放級別rotateEnable: true,showBuildingBlock: true})});} }

就可以顯示地圖了。

參考文章https://blog.csdn.net/weixin_39461487/article/details/79798471
持續更新…

總結

以上是生活随笔為你收集整理的ionic4集成高德地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。