如何在Ionic3中調起第三方地圖APP（百度，高德，騰訊）

大家有沒有碰到需要在Ionic裏面打開第三方地圖軟件，來使用導航或者其他使用其他的地圖功能呢？

通過使用uri scheme的方式調起第三方應用是現在web調原生應用採用的主要方法（第三方應用須支持URI Scheme），至於具體的Scheme如何使用，需要到第三方應用的文檔查看，每一家都不相同。

我們可以使用Cordova原生插件AppAvailability來通過URI Scheme檢查應用是否已經在用戶的手機上安裝：

ionic cordova plugin add cordova-plugin-appavailability
npm install --save @ionic-native/app-availability

import {Injectable} from '@angular/core';
import {Device} from '@ionic-native/device';
import {AppAvailability} from '@ionic-native/app-availability';
@Injectable()
export class CheckMapApp {
  PHONEMAPAPP: Array<{ "text": string, "type": string }>=[];
  currentPlatform: string;

  constructor(public device:Device,public appAvailability:AppAvailability){
    this.currentPlatform = device.platform;
    this.checkApp("baidumap://", "com.baidu.BaiduMap");
    this.checkApp("iosamap://", "com.autonavi.minimap");
    this.checkApp("qqmap://", "com.tencent.map");
  }
  checkApp(iosScheme: string, androidScheme: string){
    let appName: string;
    console.log(this.currentPlatform);
    switch (this.currentPlatform){
      case 'iOS':appName=iosScheme;break;
      case 'Android':appName=androidScheme;break;
    }
    this.appAvailability.check(appName).then(
      (yes)=>{
        if (iosScheme === "iosamap://") {
          this.PHONEMAPAPP.push( { "text": "高德地圖", "type": "alimap" });
        }else if (iosScheme === "baidumap://") {
          this.PHONEMAPAPP.push( { "text": "百度地圖", "type": "baidumap" });
        } else if (iosScheme === "qqmap://") {
          this.PHONEMAPAPP.push( { "text": "騰訊地圖", "type": "qqmap" });
        }
        console.log("This done"+iosScheme);
      },
      (no)=>{
        console.log("sorry,you not installed the app");
      }
    )
}

}

然後在需要導航的地方使用URI調起地圖APP，同時將位置參數傳遞過去，然後地圖API可以自己處理參數，打開我們想要的頁面。

openDifferentNavApp(platform: string, mapapp: string, destinationPosition) {
    if (platform === "Android") {
      switch (mapapp) {
        case "baidumap":
          window.location.href = 'bdapp://map/direction?destination=latlng:' + destinationPosition.latitude + ',' + destinationPosition.longitude + '|name:設備所在位置&mode=driving';
          break;
        case "alimap":
          window.location.href = 'androidamap://route?sourceApplication=softname&dlat=' + destinationPosition.latitude + '&dlon=' + destinationPosition.longitude + '&dname=設備所在位置&dev=0&t=2';
          break;
        case "qqmap":
          window.location.href = 'qqmap://map/routeplan?type=drive&to=設備所在位置&tocoord=' + destinationPosition.latitude + ',' + destinationPosition.longitude + '&policy=1&referer=myapp';
          break;
      }
    } else if (platform === "iOS") {
      switch (mapapp) {
        case "baidumap":
          window.location.href = 'baidumap://map/direction?destination=latlng:' + destinationPosition.latitude + ',' + destinationPosition.longitude + '|name:設備所在位置&mode=driving&src=webapp.navi.MM-software.MM-ioTHub';
          break;
        case "alimap":
          window.location.href = 'iosamap://path?sourceApplication=XXXXXXX&did=BGVIS2&dlat=' + destinationPosition.latitude + '&dlon=' + destinationPosition.longitude + '&dname=設備所在位置&dev=0&t=0';
          break;
        case "qqmap":
          window.location.href = 'qqmap://map/routeplan?type=drive&to=設備所在位置&tocoord=' + destinationPosition.latitude + ',' + destinationPosition.longitude + '&policy=1&referer=myapp';
          break;
      }
    }
  }

是不是很簡單呢？其實，不止地圖APP調起如此，我們也可以採用這種方式，關鍵是要仔細看看對方的文檔，傳遞對參數和URI地址。

聽起來是不是有點像地下工作者的接頭暗號呢？快，天王蓋地虎！對方是誰？