mobile_h5/card/common/openmap.js

// 判断设备类型
export function getDeviceType() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
 
  if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
    return 'iOS'; // iOS device
  } else if (userAgent.match(/Android/i)) {
    return 'Android'; // Android device
  } else {
    return 'unknown'; // 其他设备
  }
}

// 打开指定的地图APP
// mapAppId 1: 高德地图  2:百度地图  3: 腾讯地图
// longitude, latitude  地点经纬度
// name	地点名称
export function openNavigation(mapAppId, longitude, latitude, name) {
	let url = ""; // app url
	let referer = "彩图奔跑"; //应用名称
	
	const deviceType = getDeviceType();
	
	switch (mapAppId) {
		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
		case 1: //打开高德地图
			if (deviceType == "Android") { // 安卓
				url =
					`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
			} else { //苹果
				url =
					`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
			}
			break;
		case 2: //打开百度地图
			if (deviceType == "Android") { // 安卓
				url =
					`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
			} else { //苹果
				url =
					`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
			}
			break;
		case 3: //打开腾讯地图
			if (deviceType == "Android") { // 安卓
				url =
					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`
			} else { //苹果
				url =
					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`;
			}
			break;
	}
	
	// 如果选中
	if (url != "") {
		url = encodeURI(url);
		// window.open(url);
		window.location.href = url;
	}
}

// 打开指定的地图APP
// mapAppId 1: 高德地图  2:百度地图  3: 腾讯地图
// longitude, latitude  地点经纬度
// name	地点名称
export function openNavigation2(mapAppId, longitude, latitude, name) {
	let url = ""; // app url
	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
	let referer = "彩图奔跑"; //应用名称
	
	switch (mapAppId) {
		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
		case 1: //打开高德地图
			url =
				`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
			break;
		case 2: //打开百度地图
			url =
				`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
			break;
		case 3: //打开腾讯地图
			url =
				`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${referer}`
			break;
	}
	
	// 如果选中
	if (url != "") {
		url = encodeURI(url);
		window.open(url);
		// window.location.href = url;
	}
}

// 打开指定的地图APP
// mapAppId 1: 高德地图  2:百度地图  3: 腾讯地图
// longitude, latitude  地点经纬度
// name	地点名称
export function openNavigation3(mapAppId, longitude, latitude, name) {
	let url = ""; // app url
	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
	let referer = "彩图奔跑"; //应用名称
	
	const deviceType = getDeviceType();
	
	switch (mapAppId) {
		//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
		case 1: //打开高德地图
			if (deviceType == "Android") { // 安卓
				url =
					`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
			} else { //苹果
				url =
					`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
			}
			webUrl =
				`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
			break;
		case 2: //打开百度地图
			if (deviceType == "Android") { // 安卓
				url =
					`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
			} else { //苹果
				url =
					`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
			}
			webUrl =
				`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
			break;
		case 3: //打开腾讯地图
			if (deviceType == "Android") { // 安卓
				url =
					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`
			} else { //苹果
				url =
					`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`;
			}
			webUrl =
				`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${referer}`
			break;
	}
	
	// 如果选中
	if (url != "") {
		url = encodeURI(url);
		
		document.addEventListener('visibilitychange', function() {
		    if (document.hidden) { // 当页面被切换至后台时
		        // console.log("页面已经切换到了后台");
				clearTimeout(t);
				appInstalled = true;
				// uni.showToast({
				// 	title: chooseMap + '已安装，正在打开APP...',
				// 	icon: 'none',
				// 	duration: 2000
				// });
		    } else { // 当页面重新显示在前台时
		        // console.log("页面已经切换回前台");
		    }
		});
		
		// window.open(url);
		window.location.href = url;
		
		let chooseMap = ''
		if (mapAppId == 1) {
			chooseMap = "高德地图"
		} else if (mapAppId == 2) {
			chooseMap = "百度地图"
		} else {
			chooseMap = "腾讯地图"
		}
		
		let appInstalled = false;
		let t = setTimeout(() => {
			if (appInstalled) {
				return;
			}
			
			uni.showModal({
				title: '提示',
				content: '您的手机尚未安装' + chooseMap + '，是否要使用浏览器打开？',
				confirmText: '确定', //确定文本的文字
				cancelText: '取消', //确定文本的文字
				showCancel: true, //没有取消按钮的弹框
				success: function(res) {
					if (res.confirm) {
						window.open(webUrl);
						// window.location.href = webUrl;
					} else if (res.cancel) {
					}
				}
			})
		}, 500); // 500毫秒后进行检查
		
	}
}

// [App平台] 打开地图
// 导航 会打开导航菜单供用户选择
export function openNavigation4(longitude, latitude, name) {
	let url = ""; // app url
	let webUrl = ""; // web url 用来为用户未安装导航软件时打开浏览器所使用url
	let referer = "SKK"; //应用名称
	
	plus.nativeUI.actionSheet({ //选择菜单
		title: "选择地图应用",
		cancel: "取消",
		buttons: [{
			title: "高德地图"
		}, {
			title: "百度地图"
		}, {
			title: "腾讯地图"
		}] // 可选的地图类型
	}, (e) => {
		// 判断用户选择的地图
		switch (e.index) {
			//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
			case 1: //打开高德地图
				if (plus.os.name == "Android") { // 安卓
					url =
						`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
				} else { //苹果
					url =
						`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
				}
				webUrl =
					`https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
				break;
			case 2: //打开百度地图
				if (plus.os.name == "Android") { // 安卓
					url =
						`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=andr.baidu.openAPIdemo&coord_type=gcj02`;
				} else { //苹果
					url =
						`iosamap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
				}
				webUrl =
					`http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${name}&output=html&src=webapp.baidu.openAPIdemo`
				break;
			case 3: //打开腾讯地图
				if (plus.os.name == "Android") { // 安卓
					url =
						`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`
				} else { //苹果
					url =
						`qqmap://map/geocoder?coord=${latitude},${longitude}&title${name}&addr=${name}=&referer=${referer}`;
				}
				webUrl =
					`https://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude}&title=${name}&addr=${name}&referer=${referer}`
				break;
		}
		
		// 如果选中
		if (url != "") {
			url = encodeURI(url);
			// console.log(url, '地址')
			// 打开 app 导航 
			plus.runtime.openURL(url, (err) => { // 失败回到
				// 毕竟用户可能没有安装app但一定安装的有浏览器						
				// 如果失败则说明未安装 直接 打开网页版进行导航
				let chooseMap = ''
				if (e.index == 1) {
					chooseMap = "高德地图"
				} else if (e.index == 2) {
					chooseMap = "百度地图"
				} else {
					chooseMap = "腾讯地图"
				}
				uni.showModal({
					title: '提示',
					content: '检测到您本机暂未安装' + chooseMap + '应用，是否要选择使用浏览器打开？',
					confirmText: '确定', //确定文本的文字
					cancelText: '取消', //确定文本的文字
					showCancel: true, //没有取消按钮的弹框
					success: function(res) {
						if (res.confirm) {
							plus.runtime.openURL(webUrl)
							console.log('用户点击了确定')
						} else if (res.cancel) {
							console.log('用户点击了取消')
							// plus.nativeUI.alert("本机未安装指定的地图应用");
						}
					}
				})
			});
		}
	})
}