ionic3 實現高德地圖(1)
阿新 • • 發佈:2019-02-01
ionic3 使用高德地圖
在app上新增地圖
1、複製如下程式碼到appindex.html
頁面的<head>
標籤中,如下<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申請的高德地圖web端key"></script>
注意,該js必須放在以下程式碼的前面:
<script src="build/main.js"></script>2、在xxx.html建立一個div
<ion-content> <div在xxx.scss#map_container class="map_container"></div> </ion-content>
page-home { .map_container { width: 100%; height: 100%; } }
在xxx.ts
import { Component, ViewChild, ElementRef } from '@angular/core'; declare var AMap; @Component({ selector: 'page-home', templateUrl: 'home.html'}) export class HomePage { @ViewChild('map_container') map_container: ElementRef; map: any;//地圖物件 constructor(public navCtrl: NavController) { } ionViewDidEnter() { this.map = new AMap.Map(this.map_container.nativeElement, { view: new AMap.View2D({//建立地圖二維視口 zoom: 11, //設定地圖縮放級別 rotateEnable: true, showBuildingBlock: true }) }); } }
啟動ionic就可以顯示高德地圖了