uniapp实现小程序地图导航

效果图:

js 复制代码
	const target = computed(() => ({
		lat: data.value?.latitude || 22.525294,
		lng: data.value?.longitude || 113.94319,
		destination: data.value.address || ''
	}));
	// 点击按钮触发:先授权定位,再唤起地图
	const handleOpenLocation = () => {
		wx.getSetting({
			success(res) {
				const locationAuth = res.authSetting['scope.userLocation']
				if (locationAuth === undefined) {
					wx.authorize({
						scope: 'scope.userLocation',
						success() {
							openLocationFn();
						},
						fail() {
							console.log('授权失败:', err);
							wx.showToast({
								title: '拒绝授权后无法使用导航',
								icon: 'none'
							});
						}
					});
				} else if (locationAuth === false) {
					wx.showModal({
						title: '需要位置权限',
						content: '你已拒绝位置授权,请手动开启:点击右上角「···」→「设置」→「位置信息」→「允许」',
						confirmText: '知道了'
					});
				} else {
					openLocationFn();
				}
			},
			fail() {
				wx.showToast({
					title: '获取权限设置失败',
					icon: 'none'
				});
			}
		});
	};

	// 封装:调用wx.openLocation
	const openLocationFn = () => {
		wx.openLocation({
			latitude: parseFloat(target.value.lat),
			longitude: parseFloat(target.value.lng),
			name: target.value.destination,
			scale: 18,
			success() {
				console.log('唤起微信地图成功,用户可选择Apple/腾讯/高德导航');
			},
			fail(err) {
				wx.showToast({
					title: `唤起失败:${err.errMsg}`,
					icon: 'none'
				});
			}
		});
	};
相关推荐
我命由我1234537 分钟前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
自由生长20241 小时前
IndexedDB的观察
前端
IT_陈寒2 小时前
Vite热更新坑了我三天,原来配置要这么写
前端·人工智能·后端
斯班奇的好朋友阿法法2 小时前
离线ollama导入Qwen3.5-9B.Q8_0.gguf模型
开发语言·前端·javascript
掘金一周2 小时前
每月固定续订,但是token根本不够用,掘友们有无算力焦虑啊 | 沸点周刊 4.2
前端·aigc·openai
小村儿2 小时前
连载加餐01-claude code 源码泄漏 ---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
莫物3 小时前
vue过滤表格数据导致的索引错乱问题
前端·javascript·vue.js
竹林8183 小时前
从监听失败到实时更新:我在NFT铸造项目中搞定合约事件监听的全过程
前端·javascript
光影少年3 小时前
手写防抖和节流
前端·javascript·前端框架
笨笨狗吞噬者3 小时前
uni-app 编译小程序原生组件时疑似丢属性,可以给官方提 PR 了
前端·微信小程序·uni-app