ionic+cordova项目打开外部地图（高德+百度）

最新推荐文章于 2022-08-19 11:37:42 发布

雨中青衣浮

最新推荐文章于 2022-08-19 11:37:42 发布

阅读量1.5k

点赞数 1

分类专栏： ionic

本文链接：https://blog.youkuaiyun.com/qq_37302082/article/details/84233470

版权

ionic 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Ionic和Cordova插件检测并调用百度地图和高德地图App，实现跨平台(iOS和Android)的地图功能。通过检查用户设备上是否已安装指定地图应用，进而调用其API进行步行导航。

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

首先是两个打开外部地图App用到的插件

检查用户设备上是否已安装指定的 APP：

ionic cordova plugin add cordova-plugin-appavailability

npm install --save @ionic-native/app-availability

检查或启动第三方 APP：

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

首先检测用户是否安装百度地图和高德地图，因为项目中既有android又有ios双平台，所以就先判断一下。

/*检测高德地图*/
openGdMap() {
  var app = '';
  if (this.platform.is('ios')) {
    app = 'iosamap://';
    /* Scheme URL */
  } else if (this.platform.is('android')) {
    app = 'com.autonavi.minimap';
    /* 安卓包名 */
  }
  this.appAvailability.check(app)     /* 检测是否已安装 */
    .then(
      (yes: boolean) => {
        this.flaggd = true;
      },
      (no: boolean) => {
        this.flaggd = false;
      }
    );

}

/*检测是否有百度地图*/
openBMap() {
  var app = '';
  if (this.platform.is('ios')) {
    app = 'baidumap://';
    /* 百度的Scheme URL */
  } else if (this.platform.is('android')) {
    app = 'com.baidu.BaiduMap';
    /* 百度的安卓包名 */
  }
  this.appAvailability.check(app)     /* 检测百度地图是否已安装 */
    .then(
      (yes: boolean) => {
        this.flagbd = true;
      },
      (no: boolean) => {
        this.flagbd = false;
      }
    );
}

如果安装的话，参考百度地图和高德地图的API，写打开外部地图的方法，同样项目需要，打开的方法适配了ios和android，注意ios和android的调用方法不一样，仔细看API。注意URI的路径，这个做的是传一个经纬度然后打开地图进行步行导航。

/*打开高德地图App*/
openGd() {
  var bd_lng = parseFloat(this.checklontitude);
  var bd_lat = parseFloat(this.checklatitude);
  // 百度坐标转高德
  var X_PI = Math.PI * 3000.0 / 180.0;
  var x = bd_lng - 0.0065;
  var y = bd_lat - 0.006;
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
  var gg_lng = z * Math.cos(theta);
  var gg_lat = z * Math.sin(theta);

  let mypackage = '';
  let uri = "";
  if (this.platform.is('ios')) {
    mypackage = 'iosamap://';
    uri = "iosamap://viewMap?sourceApplication=sharebook&poiname=A&lat=39.98848272&lon=116.47560823&dev=1";
    var sApp = startApp.set(uri);
    sApp.start(function () {
      console.log("OK");
    }, function (error) {
      alert("打开失败，请重试");
    });

    /* 百度的Scheme URL */
  } else if (this.platform.is('android')) {
    mypackage = 'com.autonavi.minimap';
    uri = "amapuri://route/plan/?sourceApplication=softname&dlat=" + gg_lat + "&dlon=" + gg_lng + "&dname=" + this.case_address + "&dev=0&t=2";
    /* 百度的安卓包名 */
    var sApp = startApp.set({
      /* params */
      "action": "ACTION_VIEW",
      "category": "CATEGORY_DEFAULT",
      "type": "text/css",
      "package": mypackage,
      "uri": uri,
      "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
      "intentstart": "startActivity",
    });
    sApp.start(function () {
      console.log("OK");
    }, function (error) {
      alert("打开失败，请重试");
    });
  }


}

/*打开百度地图App*/
openBd() {
  let scheme = "com.baidu.BaiduMap";
  // 反向地址解析,和正常经纬度位置相反
  var str = this.checklatitude + "," + this.checklontitude;
  let mypackage = '';
  let uri = "";
  if (this.platform.is('ios')) {
    uri = "baidumap://map/direction?origin=" + str + "destination=" + str + "&mode=walking&src=ios.baidu.openAPIdemo";
    /* 百度的Scheme URL */
    var sApp = startApp.set(uri);
    sApp.start(function () {
      console.log("OK");
    }, function (error) {
      alert("打开失败，请重试");
    });
  } else if (this.platform.is('android')) {
    mypackage = 'com.baidu.BaiduMap';
    uri = "baidumap://map/direction?src=openApiDemo&destination=name:" + this.case_address + "|latlng:" + str + "&mode=walking";
    /* 百度的安卓包名 */
    var sApp = startApp.set({
      /* params */
      "action": "ACTION_VIEW",
      "category": "CATEGORY_DEFAULT",
      "type": "text/css",
      "package": mypackage,
      "uri": uri,
      "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
      "intentstart": "startActivity",
    });
    sApp.start(function () {
      console.log("OK");
    }, function (error) {
      alert("打开失败，请重试");
    });
  }
}

其中startApp引用要在import下面声明一下：

declare let startApp: any;//打开外部App