uniapp开发微信小程序和app里用到过的Location相关的应用
1.首先要获取位置uni.getLocation
getlocation(){
uni.getLocation({
type: 'gcj02',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});
},
默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation
和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
2.用经纬度,实现相关应用
1>查看位置,在内置地图的显示 uni.openLocation
dotLocation(){//坐标点位置
uni.openLocation({
latitude: Number(34.605),
longitude: Number(113.1),
scale: 12,
complete:function(res){
console.log(res)
}
})
},
我直接填了个经纬度,用的时候可以换成变量
打开是这样,可以点右下角,去选择app导航
2>打开内置地图查询位置uni.chooseLocation
chooselocation(){
uni.chooseLocation({
success: function (res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
}
});
}
样式和功能不能改变,如有别的需求可用map组件
3>map地图组件
这里是一个需求:1.类似uni.chooseLocation 2.电子围栏3.保留上次选的位置
取消
确定
{{item.name}}
{{item.distance+' | '+item.address}}
这里面样式写的很不规范,大体功能可用,慎用,需自己申请腾讯地图key
注意
用户使用前必须授权定位
小程序使用以上接口需申请接口
4>授权定位权限
首先要检查授权状态,已授权的就可继续定位等功能,未授权则APP提示或小程序跳转设置
getauthorize(){
// #ifdef MP-WEIXIN
console.log('请求授权状态')
const that=this
uni.authorize({
scope:'scope.userLocation',
success() {
console.log('成功授权')
that.getlocation();
},
fail() {
console.log('未授权')
that.getopenconfirm()
}
})
// #endif
// #ifdef APP-PLUS
plus.geolocation.getCurrentPosition(function(p){
that.resrLocation(p.coords.latitude,p.coords.longitude)
}, function(e){
if(e.message=='get location fail.'){
uni.showToast({
icon:'none',
title:'请打开GPS定位服务'
})
}
else{
uni.showToast({
icon:'none',
title:e.message
})
}
})
// #endif
},
//获取当前地理位置
getlocation(){
uni.getLocation({
type:'gcj02',
altitude:true,
success: (res) => {
console.log('请求当前位置',res)
//this.resrLocation(res.latitude,res.longitude)
}
})
},
//授权弹出
getopenconfirm(){
uni.showModal({
title:'请求授权当前位置',
content:'需要获取您的地理位置提供服务,请确认授权',
success: (res) => {
if(res.confirm){
uni.openSetting({})
}
else if(res.cancel){
uni.showToast({
title:'您拒绝了授权,无法获得定位信息,为您提供默认地址信息',
icon:'none',
duration:1000
})
}
}
})
},