首先吆豹，可以參考JS版本的百度地圖API示例鱼的。
由于在ionic程序中，我們一般使用的ES5 或 ES6 或者是Typescript痘煤。 這與JS 還有有一些區(qū)別的,比如TS的回調(diào)函數(shù)與JS是在寫法上是不同的凑阶。所以，在我們的程序中衷快，代碼與官方示例代碼格式上不完全相同宙橱。
下面，簡(jiǎn)單說明一下如何在 ionic 程序中 調(diào)用 百度地圖API.
1. 在ionic程序中，定位到文件： \src\index.html.? 在 head tag中师郑，添加如下代碼 , 注意將“您的密鑰” 替換成 您申請(qǐng)的密鑰
? ? <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
2.參考ionic Geolocation 官方文檔,? 安裝geolocation package , 這個(gè)包用來做定位當(dāng)前設(shè)備的經(jīng)緯度信息
? ? $ ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
? ? $ npm install --save @ionic-native/geolocation
3. 在ionic 程序中 环葵， 打開終端，輸入 ionic g page map,? 將map page注冊(cè)到 src\app\app.module.
? ? import { MapPageModule } from '../pages/map/map.module';
? ? import { Geolocation } from '@ionic-native/geolocation';
? @NgModule({
? ? imports: [ ...
? ? ? ? ? ? MapPageModule
? ? providers: [...
? ? ? ? ? ? Geolocation
4.? 在ionic 程序中 宝冕，定位到文件： \src\pages\map\map.html ,? 在 ion-content tag 中 张遭， 添加如下代碼。
? ? <div class="align-bottom" #map id="map_container"></div>
? ? 代碼如下圖所示地梨。
5 .在ionic 程序中 菊卷，定位到文件? \src\pages\map\map.ts ，? 以下代碼實(shí)現(xiàn)的是 地圖加載 并 定位當(dāng)前設(shè)備宝剖。
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, AlertController, NavParams, MenuController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var BMap;
declare var BMapLib;
@IonicPage()
@Component({
? selector: 'page-map',
? templateUrl: 'map.html',
})
export class MapPage {
? map: any;
? myGeo: any;
? myIcon: any;
@ViewChild('map') map_container: ElementRef;
? constructor(public navCtrl: NavController, public navParams: NavParams,
? private geolocation: Geolocation) {
? //此處請(qǐng)自行放置一個(gè)icon文件到 assets/icon目錄中
? ? this.myIcon = new BMap.Icon("assets/icon/position.png", new BMap.Size(32, 32));
? }
ionViewDidLoad() {
? ? //Amin: !Important:map_container shoud be called here, it can't be inited in constructor, if called in constructor
? ? this.map = new BMap.Map("map_container");
? ? this.map.centerAndZoom('上海', 13);
? ? this.map.enableScrollWheelZoom(true);
? ? this.myGeo = new BMap.Geocoder();
? ? var geolocationControl = new BMap.GeolocationControl();
? ? this.map.addControl(geolocationControl);
? ? this.getLocation();
? }
getLocation() {
? ? this.geolocation.getCurrentPosition().then((resp) => {
? ? ? if (resp && resp.coords) {
? ? ? ? let locationPoint = new BMap.Point(resp.coords.longitude, resp.coords.latitude);
? ? ? ? let convertor = new BMap.Convertor();
? ? ? ? let pointArr = [];
? ? ? ? pointArr.push(locationPoint);
? ? ? ? convertor.translate(pointArr, 1, 5, (data) => {
? ? ? ? ? if (data.status === 0) {
? ? ? ? ? ? let marker = new BMap.Marker(data.points[0], { icon: this.myIcon });
? ? ? ? ? ? this.map.panTo(data.points[0]);
? ? ? ? ? ? marker.setPosition(data.points[0]);
? ? ? ? ? ? this.map.addOverlay(marker);
? ? ? ? ? }
? ? ? ? })
? ? ? ? this.map.centerAndZoom(locationPoint, 13);
? ? ? ? console.log('GPS定位：您的位置是 ' + resp.coords.longitude + ',' + resp.coords.latitude);
? ? ? }
? ? }).catch(e => {
? ? ? console.log('Error happened when get current position.');
? ? });
? }
運(yùn)行結(jié)果如下圖所示洁闰。? 注意以上代碼實(shí)現(xiàn)的是加載地圖 并 實(shí)現(xiàn) 定位功能，所以請(qǐng)忽略途中的輸入框诈闺。
如果錯(cuò)誤或者任何疑問渴庆，歡迎留言， 也歡迎提出批評(píng)指正雅镊。? @caiyaming.
