最近遇到前端需要實現地圖的功能，其實呼叫地圖的例子網上有好多，這邊介紹一下我們如何通過ionic框架在前端呼叫百度地圖。

首先我們需要在src目錄下的index.html檔案中引入百度地圖，在這之前請申請百度地圖金鑰（金鑰在百度地圖官網申請）

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你所申請的金鑰"></script>

其次我們需要呼叫geolocation外掛來進行定位，在終端中輸入以下命令列進行安裝

ionic cordova plugin add cordova-plugin-geolocation
npm install --save @ionic-native/geolocation
（若使用淘寶映象，請將nmp改為cnmp）
//npm淘寶映象，之後就可以採用cnpm代替npm命令加快之後plugin下載速度
//npm install -g cnpm --registry=https://registry.npm.taobao.org
 

接著我們在html中加入map，並寫好樣式，例如

//html檔案
<div #map id="map_container"></div>

//scss檔案
  #map_container{
    width: 100%;
    height: 100%;
  }

最後我們進行ts檔案的編寫，具體是通過geolocation外掛提供的getcurrentlocation來獲取當前位置，但是這個方法只會獲取一次，因此我們這邊用的是watchposition方法來獲取實時位置，關於這兩個函式的具體用法可以在ionic官方文件上檢視。接著我們會從後端獲取需要在地圖上顯示的標記的經緯度（只需要實現實時定位功能的話可以忽略），然後在地圖上標記出來。具體程式碼如下所示

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage,NavController, NavParams } from 'ionic-angular';
//匯入geolocation
import { Geolocation } from '@ionic-native/geolocation';
//這邊我們寫了一個合httpservice用來get或者post後端資料，進而從後端獲取要在地圖上顯示的標記的經緯度
import { HttpService } from "../../services/HttpService";
import { AppConfig } from "../../app/app.config";
//申明百度地圖類庫
declare var BMap;


@IonicPage()
@Component({
  selector: 'page-BaiduMap',

  templateUrl: 'BaiduMap.html'
})
export class HomePage {
  @ViewChild('map') map_container: ElementRef; //建立檢視
  map: any; //地圖物件
  marker: any; //標記
  markIcon:any; //標記圖示
  locationIcon:any; //實時位置圖示
  url = AppConfig.getUrl(); //獲取伺服器url，這邊要提前在config中寫好伺服器的url，以便獲取標記的經緯度
  markOrder:any; //從後端獲取的標記順序
  subscription: any; //用來控制watchposition，以便在退出頁面的時候關閉

  constructor(public navCtrl: NavController,
               private geolocation: Geolocation,
               private settings: SettingProvider,
               private httpService:HttpService) {
    this.markIcon = new BMap.Icon("assets/icon/mark.ico", new BMap.Size(50, 50));
    this.locationIcon = new BMap.Icon("assets/icon/currentlocation.ico", new BMap.Size(30, 30));

  }

//在進入頁面的時候觸發

  ionViewDidEnter() {

    let map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });  //建立地圖例項
    map.addControl(new BMap.MapTypeControl()); //新增地圖型別


    this.httpService.get(this.url + "你的action") //呼叫相關action
      .then(res=>{
        //判斷是否認證成功
       for(this.markOrder=0;;this.markOrder++){
          let point = new BMap.Point(res[this.markOrder].ccLongitudeBaidu, res[this.markOrder].ccLatitudeBaidu); //標記位置顯示
           let marker = new BMap.Marker(point,{ icon: this.markIcon });  //設定標記圖示
          this.map.addOverlay(marker);  //加入地圖中
        
      }}).catch((err:any) => {
      console.log(err);
    });


    let sizeMap = new BMap.Size(10, 80); //地圖大小
    // map.addControl(new BMap.NavigationControl());//新增平移縮放控制元件

    //獲取當前位置（只調用一次）
    this.geolocation.getCurrentPosition().then((resp) => {
      let point = new BMap.Point(resp.coords.longitude, resp.coords.latitude);
      map.centerAndZoom(point, 18);  //設定中心和地圖顯示級別
    });


    let previousMarker = null; //記錄實時定位時儲存先前一個marker點，以便更新時刪除前一個marker點
    //採用watchPosition()實時更新定位
    this.subscription = this.geolocation.watchPosition()
      .filter((p) => p.coords !== undefined) //Filter Out Errors
      .subscribe(position => {
        let point = new BMap.Point(position.coords.longitude, position.coords.latitude);

        let convertor = new BMap.Convertor();  //定義轉換器
        let pointArr = [];  //定義位置點陣列
        pointArr.push(point);  //放入當前位置點
        convertor.translate(pointArr, 1, 5, (data) => {
          if (data.status === 0) {
            //如果已經記錄過一次當前位置，則刪除上一次的位置圖示
            if(previousMarker != null){
              this.map.removeOverlay(previousMarker);
            }
            //設定圖示並加入到地圖中
            let marker = this.marker = new BMap.Marker(data.points[0], { icon: this.locationIcon });
            this.map.panTo(data.points[0]);
            marker.setPosition(data.points[0]);
            this.map.addOverlay(marker);
            previousMarker = marker;  //記錄當前marker以便下次重新整理位置時刪除
          }
        })
      });


    map.enableScrollWheelZoom(true);  //啟動滾輪放大縮小，預設禁用
    map.enableContinuousZoom(true);   //連續縮放效果，預設禁用
  }


  //跳轉至城市選擇頁面
  goCitySelect(){
    this.navCtrl.push('CitySelectPage')
  }


  ionViewDidLeave(){
    //離開頁面時關閉實時更新當前位置
    this.subscription.unsubscribe();
  }

}

 

參考資料