uniapp实现小程序地图导航的完整代码

 更新时间:2026年03月12日 10:45:15   作者:不会前端的厨子不是个好司机  
这篇文章主要介绍了uniapp实现小程序地图导航的完整代码,uniapp实现微信小程序地图导航,可选腾讯,百度,高德,apple 等,调用官方接口唤起导航页面,文中给出了详细的代码示例,需要的朋友可以参考下

效果图:

示例代码: 

	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'
				});
			}
		});
	};

总结 

到此这篇关于uniapp实现小程序地图导航的文章就介绍到这了,更多相关uniapp小程序地图导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Chai.js断言库API中文文档

    详解Chai.js断言库API中文文档

    这篇文章主要介绍了详解Chai.js断言库API中文文档,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 使用typescript快速开发一个cli的实现示例

    使用typescript快速开发一个cli的实现示例

    这篇文章主要介绍了使用typescript快速开发一个cli的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 生成无限制的微信小程序码的示例代码

    生成无限制的微信小程序码的示例代码

    这篇文章主要介绍了生成无限制的微信小程序码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript使用小插件实现倒计时的方法讲解

    JavaScript使用小插件实现倒计时的方法讲解

    今天小编就为大家分享一篇关于JavaScript使用小插件实现倒计时的方法讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • JavaScript 获取元素在父节点中的下标(推荐)

    JavaScript 获取元素在父节点中的下标(推荐)

    jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标,需要的朋友参考下吧
    2017-06-06
  • js图片上传前预览功能(兼容所有浏览器)

    js图片上传前预览功能(兼容所有浏览器)

    这篇文章主要为大家详细介绍了js图片上传前预览功能,兼容所有浏览器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS 中 reduce()方法使用小结

    JS 中 reduce()方法使用小结

    reduce是一个对数组累积操作的方法,使用时要加上 return 返回累积操作的数据,这样 prev 才能获取上一次执行的结果,否则是 undefined,这篇文章主要介绍了JS 中 reduce()方法及使用详解,需要的朋友可以参考下
    2023-12-12
  • 关于var在for循环遇到的问题解决

    关于var在for循环遇到的问题解决

    这篇文章主要给大家介绍了关于var在for循环遇到的问题的几种解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • Flex通过JS获取客户端IP和计算机名的实例代码

    Flex通过JS获取客户端IP和计算机名的实例代码

    这篇文章主要介绍了Flex通过JS获取客户端IP和计算机名的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • javascript程序优化问题

    javascript程序优化问题

    写了几年代码,很少谈到javascript程序的执行效率问题,今天就举几个例子看看,让大家看看程序优化是多么重要。 这节来看看createElement和innerHTML的表现。看看差别是多大
    2008-05-05

最新评论