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小程序地图导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
这篇文章主要介绍了Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜教程(二)的相关资料,需要的朋友可以参考下2015-12-12


最新评论