uniapp app调用手机地图软件

//打开第三方地图
//经纬度加地址名字
export function toMapAPP(latitude, longitude, name) {
	let url = "";
	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=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) {
					plus.nativeUI.alert("本机未安装该地图APP");
				});
			}
		})
	} 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=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) {
					plus.nativeUI.alert("本机未安装该地图APP");
				});
			}
		})
	}
}


UniApp 是一款基于 Vue.js 的跨平台应用开发框架,它可以帮助开发者构建一套代码,同时适应多个平台,包括 Web、iOS、Android 和 H5 等。在 UniApp 中,如果你想要调用手机的内置功能,比如打电话,你需要利用原生的能力,因为 UniApp 提供的是封装后的接口,而不是直接访问底层操作。 在 UniApp 中,调用电话号码的方式通常涉及到 `uni-app-plus` 插件中的 `plus打电话` 方法。首先,你需要确保已经在项目中安装了这个插件,并在运行环境(如微信小程序、H5 或原生应用)中支持相应的权限请求。具体步骤如下: 1. 在项目的 `pages/index.vue` 或其他需要使用该功能的页面中引入 `uni-app-plus`: ```html <template> <view> <button @click="callPhone">拨打</button> </view> </template> <script> import { plus } from '@vant/weapp'; export default { methods: { callPhone() { if (plus) { // 检查是否已获取到必要的权限 if (plus perms.has('phoneCall')) { plus.phoneCall({ number: '1234567890', // 替换为你要拨打的电话号码 type: 'dial' // 拨打类型,默认为拨号 }); } else { console.log('未授权,无法拨打'); } } else { console.log('plus模块不存在,请检查是否安装并配置正确'); } } } } </script> ``` 2. 确保在项目的 `config.json` 文件中设置了对相应权限的请求: ```json { "framework": { "plugins": { "plus": {} }, "permission": { "scope_phoneCall": { "desc": "您的应用需要访问通话功能" } } } } ``` 当你点击“拨打”按钮时,如果用户已经授权,程序会调起设备上的拨号器,拨打指定的电话号码。记得根据实际需求替换电话号码,或者让用户输入号码。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值