Ionic 3 应用跳转高德地图 APP

首先检测我们的 Ionic3 应用是否安装高德地图 APP，如果安装则打开该APP。

介绍

App Availability 插件

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

Ionic Native 官方文档提供的插件，此插件用来检查用户设备上是否已安装指定的 APP。

参考地址：https://ionicframework.com/docs/native/app-availability/

startapp 插件

$ cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

此插件用来检查或启动第三方 APP。

参考地址：https://github.com/lampaa/com.lampa.startapp

开始

通过上面的介绍，可见 startapp 插件可以帮我们做到检查并启动第三方 APP。

此处以 iOS 为例：

$ ionic start myapp blank
$ cd myapp
$ ionic cordova platform add ios
$ cordova plugin add https://github.com/lampaa/com.lampa.startapp.git

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      第三方应用跳转
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="openMap()">打开高德地图</button>
</ion-content>

home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() { }

  openMap() {
    var sApp = (window as any).startApp.set("iosamap://myLocation");
    sApp.check(function (values) { /* success */
      console.log('check success', values);
      sApp.start(function () { /* success */
        console.log('start success');
      }, function (error) { /* fail */
        console.log('start fail', error)
      });
    }, function (error) { /* fail */
      console.log('check fail', error)
    });
  }

}

注意：由于 iOS 的限制，iOS9 之后 app 想调起高德地图，必须在自己 app 设置中配置白名单。可以参考以下地址：http://lbs.amap.com/api/amap-mobile/guide/ios/ios-uri-information