uni-app 加入打开高德地图导航功能时本机未安装指定地图应用的问题

uni-app 加入打开高德地图导航功能时本机未安装指定地图应用的问题

开发环境 版本号 项目创建方式
Mac iOS13 HBuilderX

产品分类：uniapp/App
PC开发环境操作系统：Mac
手机系统：iOS
手机系统版本号：iOS 15
手机厂商：苹果
手机机型：iOS
页面类型：vue
vue版本：vue2
打包方式：云端

示例代码：

export function gomapApp(latitude, longitude, name) {
let url = '';
if (plus.os.name == 'Android') {
//判断是安卓端
plus.nativeUI.actionSheet(
{
//选择菜单
title: t('line.following.manage.select.map.app'), // '选择地图应用',
cancel: t('line.following.manage.cancel'), //'取消',
buttons: [
{
title: t('line.following.manage.tencent.maps'), // '腾讯地图'
},
{
title: t('line.following.manage.baidu.maps'), //'百度地图',
},
{
title: t('line.following.manage.amap'), //'高德地图',
},
],
},
function(e) {
switch (e.index) {
//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
case 1:
//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
break;
case 2:
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
break;
case 3:
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
break;
default:
break;
}
if (url != '') {
url = encodeURI(url);
//plus.runtime.openURL(url,function(e){})调起手机APP应用
plus.runtime.openURL(url, function(e) {
let remarks5 = t('line.following.manage.remarks5'); //本机未安装指定的地图应用
plus.nativeUI.alert(remarks5);
});
}
}
);
} else {
// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
//（如urlschemewhitelist:["iosamap","baidumap"]）
plus.nativeUI.actionSheet(
{
title: t('line.following.manage.select.map.app'), //'选择地图应用',
cancel: t('line.following.manage.cancel'), //'取消',
buttons: [
{
title: t('line.following.manage.tencent.maps'), // '腾讯地图'
},
{
title: t('line.following.manage.baidu.maps'), //'百度地图',
},
{
title: t('line.following.manage.amap'), //'高德地图',
},
],
},
function(e) {
switch (e.index) {
case 1:
url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
break;
case 2:
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
break;
case 3:
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
break;
default:
break;
}
if (url != '') {
url = encodeURI(url);
plus.runtime.openURL(url, function(e) {
let remarks5 = t('line.following.manage.remarks5'); //'本机未安装指定的地图应用'
plus.nativeUI.alert(remarks5);
});
}
}
);
}
}

更多关于uni-app 加入打开高德地图导航功能时本机未安装指定地图应用的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

解决了吗？

更多关于uni-app 加入打开高德地图导航功能时本机未安装指定地图应用的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有

在 uni-app 中，如果你希望通过调用高德地图进行导航，但用户的设备上没有安装高德地图应用，你可以通过以下方式处理这种情况：

1. 检测是否安装了高德地图

首先，你可以使用 uni.getProvider 方法来检测设备上是否安装了高德地图应用。

uni.getProvider({
    service: 'map',
    success: function (res) {
        if (res.provider.includes('amap')) {
            // 设备上安装了高德地图
            console.log('高德地图已安装');
        } else {
            // 设备上未安装高德地图
            console.log('高德地图未安装');
        }
    }
});

2. 处理未安装高德地图的情况

如果设备上未安装高德地图，你可以引导用户安装高德地图，或者使用其他地图服务（如百度地图或内置浏览器打开高德地图网页版）。

2.1 引导用户安装高德地图

你可以通过 uni.navigateToMiniProgram 或 uni.openApp 方法引导用户安装高德地图。

uni.navigateToMiniProgram({
    appId: '高德地图的AppID', // 高德地图的AppID
    path: '页面路径', // 可选的页面路径
    success(res) {
        console.log('打开高德地图成功');
    },
    fail(err) {
        console.log('打开高德地图失败', err);
    }
});

2.2 使用高德地图网页版

如果用户未安装高德地图，你可以打开高德地图的网页版进行导航。

uni.openURL({
    url: 'https://uri.amap.com/navigation?from=当前位置&to=目的地&mode=driving', // 高德地图网页版导航URL
    success(res) {
        console.log('打开高德地图网页版成功');
    },
    fail(err) {
        console.log('打开高德地图网页版失败', err);
    }
});

3. 完整示例代码

以下是一个完整的示例代码，展示了如何检测高德地图是否安装，并根据情况处理：

uni.getProvider({
    service: 'map',
    success: function (res) {
        if (res.provider.includes('amap')) {
            // 设备上安装了高德地图
            uni.openLocation({
                latitude: 39.90469, // 纬度
                longitude: 116.40717, // 经度
                name: '目的地名称',
                address: '目的地地址',
                success: function () {
                    console.log('打开高德地图成功');
                },
                fail: function (err) {
                    console.log('打开高德地图失败', err);
                }
            });
        } else {
            // 设备上未安装高德地图
            uni.showModal({
                title: '提示',
                content: '未安装高德地图，是否打开网页版？',
                success: function (res) {
                    if (res.confirm) {
                        uni.openURL({
                            url: 'https://uri.amap.com/navigation?from=当前位置&to=目的地&mode=driving',
                            success: function () {
                                console.log('打开高德地图网页版成功');
                            },
                            fail: function (err) {
                                console.log('打开高德地图网页版失败', err);
                            }
                        });
                    }
                }
            });
        }
    }
});
回到顶部