如何在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地址。

听起来是不是有点像地下工作者的接头暗号呢？快，天王盖地虎！对方是谁？