uniapp下各端调用三方地图导航

uniapp 调用第三方地图导航

在 uniapp 中调用第三方地图导航，主要用 URL Scheme。

基本思路

通过 plus.runtime.openURL() 打开地图应用的 URL Scheme，传入目标经纬度，应用会自动打开并导航。

常用地图的 URL Scheme

高德地图

• iOS: iosamap://path?dname=目的地&dlat=纬度&dlon=经度&dev=0&t=0
• Android: androidamap://route?dname=目的地&dlat=纬度&dlon=经度&dev=0&t=0

百度地图

• 通用: baidumap://map/direction?destination=latlng:纬度,经度|name:目的地&mode=driving

腾讯地图

• 通用: qqmap://map/routeplan?type=drive&to=目的地&tocoord=纬度,经度

苹果地图（仅 iOS）

• maps://maps.apple.com/?daddr=纬度,经度&dirflg=d

检测应用是否安装

使用 plus.runtime.isApplicationExist() 检测：

// Android 用包名，iOS 用 Scheme
const isInstalled = plus.runtime.isApplicationExist({
  pname: 'com.autonavi.minimap',  // Android 包名
  action: 'iosamap://'             // iOS Scheme
});

注意：iOS 9+ 需要在 manifest.json 的 plus.distribute.apple.urlschemewhitelist 中添加 Scheme 白名单，否则无法检测。

实现流程

1. 获取目标经纬度
2. 检测已安装的地图应用
3. 弹出选择列表让用户选择
4. 根据选择打开对应的 URL Scheme

注意事项

• URL 中的中文需要 encodeURIComponent 编码
• iOS 需要配置白名单才能检测应用。参考文档 https://uniapp.dcloud.net.cn/tutorial/app-ios-schemewhitelist.html
• 如果应用未安装，openURL 会失败，需要做错误处理
• 不同地图的 URL 参数格式不同，需要分别处理

基本就是这样，实现起来不难，主要是整理好各个地图的 URL 格式。

/**
 * 地图导航工具函数
 * 支持高德地图、百度地图、腾讯地图、苹果地图、谷歌地图
 */

/**
 * 获取系统信息
 */
function getSystemInfo() {
	return new Promise((resolve) => {
		uni.getSystemInfo({
			success: (res) => {
				resolve(res);
			},
			fail: () => {
				resolve({});
			}
		});
	});
}

/**
 * 检测应用是否安装
 * @param {String} pname - Android平台的应用包名
 * @param {String} action - iOS平台的应用Scheme
 * @returns {Boolean}
 */
function checkAppInstalled(pname, action) {
	try {
		return plus.runtime.isApplicationExist({
			pname: pname || '',
			action: action || ''
		});
	} catch (error) {
		console.error('检测应用安装失败:', error);
		return false;
	}
}

/**
 * 获取所有可能的地图应用列表（不检测是否安装）
 * @param {Number} latitude - 纬度
 * @param {Number} longitude - 经度
 * @param {String} name - 地点名称（可选）
 * @returns {Promise<Array>}
 */
async function getAllMaps(latitude, longitude, name = '') {
	const systemInfo = await getSystemInfo();
	const platform = systemInfo.platform || '';
	const isIOS = platform === 'ios';
	const isAndroid = platform === 'android';
	
	const maps = [];
	
	// 高德地图
	// Android包名: com.autonavi.minimap
	// iOS Scheme: iosamap://
	maps.push({
		name: '高德地图',
		pname: 'com.autonavi.minimap', // Android包名
		action: 'iosamap://', // iOS Scheme
		scheme: isIOS ? 'iosamap://' : 'androidamap://',
		url: isIOS 
			? `iosamap://path?sourceApplication=applicationName&dname=${encodeURIComponent(name || '目的地')}&dlat=${latitude}&dlon=${longitude}&dev=0&t=0`
			: `androidamap://route?sourceApplication=amap&dname=${encodeURIComponent(name || '目的地')}&dlat=${latitude}&dlon=${longitude}&dev=0&t=0`
	});
	
	// 百度地图
	// Android包名: com.baidu.BaiduMap
	// iOS Scheme: baidumap://
	maps.push({
		name: '百度地图',
		pname: 'com.baidu.BaiduMap', // Android包名
		action: 'baidumap://', // iOS Scheme
		scheme: 'baidumap://',
		url: `baidumap://map/direction?origin=我的位置&destination=latlng:${latitude},${longitude}|name:${encodeURIComponent(name || '目的地')}&mode=driving&coord_type=gcj02`
	});
	
	// 腾讯地图
	// Android包名: com.tencent.map
	// iOS Scheme: qqmap://
	maps.push({
		name: '腾讯地图',
		pname: 'com.tencent.map', // Android包名
		action: 'qqmap://', // iOS Scheme
		scheme: 'qqmap://',
		url: `qqmap://map/routeplan?type=drive&from=我的位置&to=${encodeURIComponent(name || '目的地')}&tocoord=${latitude},${longitude}`
	});
	
	// 苹果地图（仅iOS）
	if (isIOS) {
		maps.push({
			name: '苹果地图',
			pname: '', // iOS不需要包名
			action: 'maps://', // iOS Scheme
			scheme: 'maps://',
			url: `maps://maps.apple.com/?daddr=${latitude},${longitude}&dirflg=d`
		});
	}
	
	// 谷歌地图（主要Android）
	if (isAndroid) {
		maps.push({
			name: '谷歌地图',
			pname: 'com.google.android.apps.maps', // Android包名
			action: 'google.navigation:', // Android也可以使用
			scheme: 'google.navigation:',
			url: `google.navigation:q=${latitude},${longitude}`
		});
	}
	
	return maps;
}

/**
 * 获取已安装的地图应用列表
 * @param {Number} latitude - 纬度
 * @param {Number} longitude - 经度
 * @param {String} name - 地点名称（可选）
 * @returns {Promise<Array>}
 */
async function getAvailableMaps(latitude, longitude, name = '') {
	const allMaps = await getAllMaps(latitude, longitude, name);
	const installedMaps = [];
	
	// 检测每个地图应用是否已安装
	for (const map of allMaps) {
		const isInstalled = checkAppInstalled(map.pname, map.action);
		if (isInstalled) {
			installedMaps.push(map);
		}
	}
	
	return installedMaps;
}

/**
 * 打开地图应用
 * @param {String} url - 地图应用的URL
 * @param {String} mapName - 地图应用名称
 */
function openMapApp(url, mapName) {
	plus.runtime.openURL(url, (error) => {
		if (error) {
			uni.showToast({
				title: `未安装${mapName}`,
				icon: 'none'
			});
		}
	});
}

/**
 * 显示地图选择列表并跳转
 * @param {Number} latitude - 纬度
 * @param {Number} longitude - 经度
 * @param {String} name - 地点名称（可选）
 * @param {Object} options - 配置选项
 * @param {String} options.title - 选择列表标题
 * @param {String} options.cancelText - 取消按钮文字
 */
export async function openNavigation(latitude, longitude, name = '', options = {}) {
	if (!latitude || !longitude) {
		uni.showToast({
			title: '经纬度不能为空',
			icon: 'none'
		});
		return;
	}
	
	try {
		const maps = await getAvailableMaps(latitude, longitude, name);
		
		if (maps.length === 0) {
			uni.showModal({
				title: '提示',
				content: '请安装地图应用（高德地图、百度地图、腾讯地图等）',
				showCancel: false,
				confirmText: '知道了'
			});
			return;
		}
		
		const itemList = maps.map(map => map.name);
		
		uni.showActionSheet({
			title: options.title || '选择地图应用',
			itemList: itemList,
			cancelText: options.cancelText || '取消',
			success: (res) => {
				const selectedMap = maps[res.tapIndex];
				openMapApp(selectedMap.url, selectedMap.name);
			},
			fail: (err) => {
				// 用户取消选择
				if (err.errMsg !== 'showActionSheet:cancel') {
					console.error('显示地图选择失败:', err);
				}
			}
		});
	} catch (error) {
		console.error('打开导航失败:', error);
		uni.showToast({
			title: '打开导航失败',
			icon: 'none'
		});
	}
}