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


    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)
        })
      }

    上面的 uri 参数可以有多种选择 导航、地图标注、路线规划 等等 

    注意:这两个地图传经纬度的时候 第一个是纬度 第二个是经度 (因为这个传反了 调了一天 晕~)

    具体可以参考一下链接

    百度:http://lbsyun.baidu.com/index.php?title=uri/api/android

    高德:https://lbs.amap.com/api/amap-mobile/guide/android/navigation

     

     

  • 相关阅读:
    不同浏览器对于textarea中换行符的处理
    apache 页面压缩技术mod_deflate安装和配置
    php5+Apache2+mysql+Eclipse debug完全配置
    php程序的国际化(转载)
    PHP加载mysql DDL会失败
    mysql绿色版注册服务
    DEDE利用自由列表创建全站RSS订阅内容更新整站.xml文档
    PHP模拟多线程请求
    在Mac OS X中配置Apache + PHP + MySQL(转)
    ThinkPHP框架项目开发专题自动验证
  • 原文地址:https://www.cnblogs.com/luffyc/p/9718810.html
Copyright © 2020-2023  润新知