uniapp唤醒手机地图app

该代码段展示了如何在H5、APP-PLUS环境下唤醒手机上的腾讯地图、百度地图和高德地图应用,实现从特定经纬度跳转到地图并导航。在微信小程序中,则使用uni.openLocation接口打开地图。代码考虑了不同操作系统和地图应用的URL拼接规则,并处理了未安装对应地图应用的情况。
摘要由CSDN通过智能技术生成

H5唤醒手机app地图

// latitude  longitude 要跳转地址的经纬度,name  要跳转地址的地名
uni.showActionSheet({
	title: '请选择系统中已安装的地图应用导航',
	itemList: ['腾讯地图', '百度地图', '高德地图'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
		switch(res.tapIndex){
			//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
			case 0:
				//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
				url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
				break;
			case 1:
				url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
				break;
			case 2:
				if(!userAgent.includes('Android')){
					url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
				}else{
					url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
				}
				break;
			default:
				break;
		}
		if(url){
			url = encodeURI(url)
			window.location.href = url;
		}
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

APP-PLUS唤醒手机地图app

if (plus.os.name == "Android") {//判断是安卓端
	plus.nativeUI.actionSheet({//选择菜单
		title: "选择地图应用",
		cancel: "取消",
		buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
	}, function(e) {
		switch (e.index) {
			//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
			case 1:
				//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
				url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${name}`;
				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) {
				plus.nativeUI.alert("本机未安装指定的地图应用");
			});
		}
	})
	} else {
	// iOS上获取本机是否安装了百度高德地图,需要在manifest里配置
	// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
	//(如urlschemewhitelist:["iosamap","baidumap"])  
	plus.nativeUI.actionSheet({
		title: "选择地图应用",
		cancel: "取消",
		buttons: [{title: "腾讯地图"},{title: "百度地图"}, {title: "高德地图"}]
	}, function(e) {
		switch (e.index) {
			case 1:
				url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${name}`;
				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) {
				plus.nativeUI.alert("本机未安装指定的地图应用");
			});
		}
	})
	}

微信小程序

// 没有在登录的时候获取自己的定位 而是点击事件 调用viewMapLocation()这个方法时获取了自己的定位 
//因考虑到用户拒绝获取自己的定位所以当用户再次点击后会唤起设置让用户打开定位
// 这里传入的三个参数分别是  要去的  经度 纬度 以及 地址信息
viewMapLocation(longitude, latitude, address) {
	//  这里因为我是子组件传参过来了导致 经纬度变成了String 类型所以进行了一次转换
	latitude = Number(latitude);
	longitude = Number(longitude);
	// 获取定位信息
	uni.getLocation({
		type: 'wgs84', //返回可以用于uni.openLocation的经纬度
		// 用户允许获取定位
		success: function(res) {
			console.log(res, '经纬度')
			if (res.errMsg == "getLocation:ok") {
				console.log(latitude)
				console.log(longitude)
				uni.openLocation({
					// 传入你要去的纬度
					latitude: latitude,
					// 传入你要去的经度
					longitude: longitude,
					// 传入你要去的地址信息 不填则为空
					address: address,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('success');
					}
				});
			}
		},
		// 用户拒绝获取定位后 再次点击触发
		fail: function(res) {
			console.log(res)
			if (res.errMsg == "getLocation:fail auth deny") {
				uni.showModal({
					content: '检测到您没打开获取信息功能权限,是否去设置打开?',
					confirmText: "确认",
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {
									console.log('确定');
								}
							})
						} else {
							console.log('取消');
							return false;
						}
					}
				})
			}
		}
	});
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值