国内做外贸的网站,大连线上教学,自适应网站的代表,深圳工程交易中心官网前言
我们在使用uni-app时#xff0c;有时候会遇到需要开发地图和导航的功能#xff0c;这些方法其实微信小程序的API已经帮我们封装好了 详见#xff1a;微信小程序开发文档 接下来我们就演示如何用uni-app来使用他们
使用
templateviewbutton type…前言
我们在使用uni-app时有时候会遇到需要开发地图和导航的功能这些方法其实微信小程序的API已经帮我们封装好了 详见微信小程序开发文档 接下来我们就演示如何用uni-app来使用他们
使用
templateviewbutton typeprimary clickchooseLocation classacc选择位置 /button经度span{{longitude || longitudenull ?/:longitude}}/span纬度span{{latitude || latitudenull ?/:latitude}}/spanbutton typedefault clicknav导航 /button/view
/templatescript setupimport { getCurrentInstance, ref } from vue;import { onBackPress } from dcloudio/uni-app;const { proxy } getCurrentInstance();const name ref(null)const address ref(null)const latitude ref(null)const longitude ref(null)function nav() {uni.openLocation({latitude: latitude.value,longitude: longitude.value,name: name.value,scale: 15,address: address.value,success: function(res) {proxy.$modal.msgSuccess(打开地图成功, res);},fail: function(error) {proxy.$modal.msgError(打开地图失败, error);},});}function chooseLocation() {uni.chooseLocation({success: function(res) {name.value res.name; // 位置名称address.value res.address; // 详细地址latitude.value res.latitude; // 纬度longitude.value res.longitude; // 经度console.log(name, name.value);console.log(address, address.value);console.log(latitude, latitude.value);console.log(longitude, longitude.value);},fail: function(error) {console.error(选择位置失败, error);},});}// 获取当前位置的经纬度uni.getLocation({success: function(res) {var latitude res.latitude; // 纬度var longitude res.longitude; // 经度console.log(latitude, latitude);console.log(longitude, longitude);// 在这里可以将经纬度转换为地址信息后续步骤中会介绍如何实现这一功能。},fail: function(error) {console.error(获取地理位置失败, error);},});// 页面加载onBackPress(() {proxy.$tab.switchTab(/pages/office/index);return true;});
/scriptstyle.acc {margin-bottom: 20px;}
/style效果
进去后看到的效果 点击选择位置后 点击导航后 点击右下角的位置后调用地图功能会根据手机下载的软件来显示 如果手机内没有下载软件会有腾讯地图和谷歌地图选项点击会跳转到下载界面
