906 字
5 分钟
uniapp跳转第三方地图app
需要实现的功能
需要实现检查手机已安装的地图软件(高德地图、百度地图、腾讯地图),唤起列表选择(手机只有一款地图app直接跳转不选择,任何一款都没有跳转到网页高德地图),最后在用户点击之后跳转第三方地图软件并执行导航功能,好在各大地图app都提供了类似的接口,所以能够实现目标。
代码示例
const useGetMapsApp = (locationType= 'gcj02') => {
// 获取平台
const platform = uni.getSystemInfoSync().platform;
// 三大地图APP对应的平台包名及action
const mapsJson = {
aMap: {
pname: 'com.autonavi.minimap',
action: platform === 'ios' ? 'iosamap://' : 'amapuri://',
name: '高德地图'
},
baiduMap: {
pname: 'com.baidu.BaiduMap',
action: 'baidumap://',
name: '百度地图'
},
tencentMap: {
pname: 'com.tencent.map',
action: 'qqmap://',
name: '腾讯地图'
}
};
// 配置列表信息
let mapList = [];
// 获取平台对应的包名/action
const appKeys = Object.keys(mapsJson);
appKeys.forEach((key) => {
const app = mapsJson[key];
let obj = {
pname: app.pname,
action: app.action
};
if (plus.runtime.isApplicationExist(obj)) {
mapList.push({
key,
name: app.name,
...obj
});
}
});
// ios端添加系统默认地图,所以在ios端地图列表至少有一个
if (platform === 'ios') {
mapList.push({
name: '系统地图',
pname: 'system'
});
}
// 打开map软件列表,或者直接去导航
const openMap = (option) => {
// 如果存在以上地图APP软件
if (mapList.length) {
// 只有一个地图软件,直接打开
if (mapList.length === 1) {
openApp(1, option);
return;
}
// 多个软件调起系统弹框,用户选择
plus.nativeUI.actionSheet(
{
cancel: '取消',
buttons: mapList.map((item) => ({
title: item.name
}))
},
function (e) {
if (e.index > -1) {
openApp(e.index, option);
}
}
);
} else {
openGDWeb(option);
}
};
// 打开高德地图官网
const openGDWeb = (option) => {
// 没有第三方地图APP就跳转网页版高德地图导航
// https://uri.amap.com/navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0
plus.runtime.openURL(
encodeURI(
'https://uri.amap.com/navigation?from=' +
option.startLocation[1] +
',' +
option.startLocation[0] +
',' +
option.startAddress +
'&to=' +
option.endLocation[1] +
',' +
option.endLocation[0] +
',' +
option.endAddress +
'&mode=car&policy=1&src=mypage&coordinate=' +
(locationType === 'gcj02' ? 'gaode' : locationType) +
'&callnative=0'
)
);
};
// 打开指定的APP地图软件
const openApp = (index, option) => {
const appInfo = mapList[index - 1];
// ios端有系统地图,添加系统地图打开方式
if (appInfo.pname === 'system') {
const point1 = new plus.maps.Point(
option.startLocation[0],
option.startLocation[1]
);
const point2 = new plus.maps.Point(
option.endLocation[0],
option.endLocation[1]
);
plus.maps.openSysMap(point1, '', point2);
return;
}
// 其他地图
let action = '';
// 高德
if (appInfo.key === 'aMap') {
action = aMapPath(appInfo, option);
}
// 百度
if (appInfo.key === 'baiduMap') {
action = baiduMapPath(appInfo, option);
}
// 腾讯
if (appInfo.key === 'tencentMap') {
action = tencentMapPath(appInfo, option);
}
plus.runtime.openURL(
encodeURI(action),
() => {
uni.showToast({
icon: 'none',
title: '打开地图APP失败,即将跳转网页地图',
duration: 2000,
success: () => {
let t = setTimeout(() => {
clearTimeout(t);
t = null;
openGDWeb(option);
}, 2000);
}
});
},
appInfo.pname
);
};
// 高德跳转传参
const aMapPath = (appInfo, option) => {
return (
appInfo.action +
'route/plan?sourceApplication=&slat=' +
option.startLocation[1] +
'&slon=' +
option.startLocation[0] +
'&sname=' +
option.startAddress +
'&dlat=' +
option.endLocation[1] +
'&dlon=' +
option.endLocation[0] +
'&dname=' +
option.endAddress +
'&dev=0&t=0'
);
};
// 百度跳转传参
const baiduMapPath = (appInfo, option) => {
return (
appInfo.action +
'map/direction?origin=name:' +
option.startAddress +
'|latlng:' +
option.startLocation[1] +
',' +
option.startLocation[0] +
'&destination=name:' +
option.endAddress +
'|latlng:' +
option.endLocation[1] +
',' +
option.endLocation[0] +
'&coord_type=' +
locationType +
'&mode=driving&car_type=BLK&src=123456'
);
};
// 腾讯跳转传参
const tencentMapPath = (appInfo, option) => {
return (
appInfo.action +
'map/routeplan?type=drive&from=' +
option.startAddress +
'&fromcoord=' +
option.startLocation[1] +
',' +
option.startLocation[0] +
'&to=' +
option.endAddress +
'&tocoord=' +
option.endLocation[1] +
',' +
option.endLocation[0] +
'&referer=123'
);
};
return {
openMap
};
};
const useGetMapsApp2=() =>{
// 打开map软件列表,或者直接去导航
const openMap = (option) => {
// 如果存在以上地图APP软件
if (mapList.length) {
// 只有一个地图软件,直接打开
if (mapList.length === 1) {
openApp(1, option);
return;
}
// 多个软件调起系统弹框,用户选择
plus.nativeUI.actionSheet(
{
cancel: '取消',
buttons: mapList.map((item) => ({
title: item.name
}))
},
function (e) {
if (e.index > -1) {
openApp(e.index, option);
}
}
);
} else {
openGDWeb(option);
}
};
return {
openMap
}
}
export default useGetMapsApp;

