ionic 調用百度地圖API，並定位當前位置示例

首先，能夠參考JS版本的百度地圖API示例。 

因爲在ionic程序中，咱們通常使用的ES5 或 ES6 或者是Typescript。 這與JS 還有有一些區別的。因此，在咱們的程序中，代碼與官方示例代碼格式上不徹底相同。

下面，簡單說明一下如何在 ionic 程序中 調用 百度地圖API.

1. 在ionic程序中，定位到文件： \src\index.html.  添加以下代碼 , 注意將「您的密鑰」 替換成 您申請的密鑰

 

 

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>

2.參考ionic Geolocation 官方文檔,  安裝geolocation package , 這個包用來作定位當前設備的經緯度信息
    $ 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註冊到 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 .  定位到文件： \src\pages\map\map.ts,  

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) { 

   //此處請自行放置一個icon文件到 ssets/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.');

    });

  }

 

運行結果以下圖所示。  注意以上代碼實現的是加載地圖 並 實現 定位功能，因此請忽略途中的輸入框。

 

 

若是錯誤或者任何疑問，歡迎留言， 也歡迎提出批評指正。  @caiyaming.