ionic3 应用内打开第三方地图导航百度高德

最新推荐文章于 2019-09-21 10:42:15 发布

weixin_30475039

最新推荐文章于 2019-09-21 10:42:15 发布

阅读量547

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 git php

原文链接：http://www.cnblogs.com/luffyc/p/9718810.html

本文介绍如何使用Cordova插件检测设备上是否已安装特定的第三方应用，如百度地图和高德地图，并提供了在检测到应用存在时启动这些应用的方法。通过Ionic Native和startApp插件，开发者可以轻松实现跨平台应用的第三方应用检测与调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装检测第三方APP是否存在的插件

cordova plugin add cordova-plugin-appavailability --save

npm install --save @ionic-native/app-availability 这个可以根据项目的版本兼容性选择安装固定的版本号我安装的是@3.4.2

在页面引入 AppAvailability 并进行判断因为ios和android的包名不一样所以进行了判断

import { AppAvailability } from '@ionic-native/app-availability';//检查是否安装了应用程序
import { Platform } from 'ionic-angular';

constructor( public appAvailability: AppAvailability,private platform: Platform,) {}

ionViewDidLoad() {
    //检测百度地图是否存在
    if (this.platform.is('ios')) {
      this.baiduapp = 'baidumap://';
    } else if (this.platform.is('android')) {
      this.baiduapp = 'com.baidu.BaiduMap';
    }
    this.appAvailability.check(this.baiduapp)
    .then(
      (yes: boolean) => {//有安装app
        alert(this.baiduapp + ' is available')
      },
      (no: boolean) => {//没有安装app
        alert(this.baiduapp + ' is NOT available')
      }
    );
    //检测高德地图是否存在
    if (this.platform.is('ios')) {
      this.gaodeapp = 'autonavimap://';
    } else if (this.platform.is('android')) {
      this.gaodeapp = 'com.autonavi.minimap';
    }
    this.appAvailability.check(this.gaodeapp)
    .then(
      (yes: boolean) => {//有安装app
        alert(this.gaodeapp + ' is available')
      },
      (no: boolean) => {//没有安装app
        alert(this.gaodeapp + ' is NOT available')
      }
    );

  }

2.安装打开第三方APP的插件

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

安装成功后就可以开始使用了

declare var startApp; //在页面开头进行声明

//跳转百度地图
  gobaidumap(){
    //百度地图参数配置
    let baiduApp = startApp.set(
      {
        "action":"ACTION_VIEW",  
    　　"category":"CATEGORY_DEFAULT",  
    　　"type":"text/css",  
    　　"package":this.baiduapp,  
    　　"uri":"baidumap://map/geocoder?location="+this.location.coordinates[1]+","+this.location.coordinates[0]+"&src=andr.baidu.openAPIdemo",   
    　　"flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],   
    　　"intentstart":"startActivity",  
      }, { /* extras */  
        "EXTRA_STREAM":"extraValue1",  
        "extraKey2":"extraValue2" 
      }
    );
    baiduApp.start(function(){
      // alert('baidu ok')
    },function(error){
      alert(error)
    })
  };

  //跳转高德地图
  gogaodemap(){
    //高德地图参数配置
    let gaodeApp = startApp.set(
      {
        "action":"ACTION_VIEW",  
    　　"category":"CATEGORY_DEFAULT",  
    　　"type":"text/css",  
    　　"package":this.gaodeapp,  
    　　"uri":"androidamap://viewMap?sourceApplication=appname&poiname="+this.item.work_address+"&lat="+this.location.coordinates[1]+"&lon="+this.location.coordinates[0]+"&dev=0",   
    　　"flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],   
    　　"intentstart":"startActivity",  
      }, { /* extras */  
        "EXTRA_STREAM":"extraValue1",  
        "extraKey2":"extraValue2" 
      }
    );
    gaodeApp.start(function(){
      // alert('gaode ok')
    },function(error){
      alert(error)
    })
  }