uniapp⼩程序选择地图位置并返回经纬度及详细地址(uni.chooseLocati。
。。
uniapp ⼩程序实现选择地图位置功能
最近在做商家⼩程序,就是⽤于给实体店⽼板进⾏⽹上开店的⼩程序。
其中有⼀项功能就是获取商店的位置,要求⽀持:获取当前定位/检索到指定位置/地图选点等功能,并返回选择地点的regionId和经纬度以及详细的地址等信息。
获取地理信息的授权功能
1. manifest.json中写⼊授权地理位置的描述
代码如下:
"permission" : {
"scope.userLocation" : {
"desc" : "您的位置将⽤于绑定您的区域"
}
},
2. 点击地图图标时,调⽤下⾯的代码实现授权(uni.chooseLocation⽅式)
注意:调取授权地理位置,需要⽤到uni的api,下⾯的三个⽅法都是可以的。
getMapLocation(){
uni.chooseLocation({
success:(res)=> {
console.log(res);
// RegionFn(res);
},
fail:()=>{
// 如果⽤uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息  Setting({
success: (res) => {
console.log(res);
var status = res.authSetting;
if(!status['scope.userLocation']){
// 如果授权信息中没有地理位置的授权,则需要弹窗提⽰⽤户需要授权地理信息
uni.showModal({
title:"是否授权当前位置",
content:"需要获取您的地理位置,请确认授权,否则地图功能将⽆法使⽤",
success:(tip)=>{
firm){
// 如果⽤户同意授权地理信息,则打开授权设置页⾯,判断⽤户的操作
uni.openSetting({
success:(data)=>{
// 如果⽤户授权了地理信息在,则提⽰授权成功
if(data.authSetting['scope.userLocation']===true){
uni.showToast({
title:"授权成功",
icon:"success",
duration:1000box sizing
})
// 授权成功后,然后再次chooseLocation获取信息
uni.chooseLocation({
success: (res) => {
console.log("详细地址",res);
// RegionFn(res);
}
})
}else{
uni.showToast({
title:"授权失败",
icon:"none",
duration:1000
})
}
}
})
}
}
})
}
},
fail: (res) => {
uni.showToast({
title:"调⽤授权窗⼝失败",
icon:"none",
duration:1000
})
}
})
}
});
},
授权成功后,就可以进⼊到uniapp⾃带的选择地点的页⾯了,可以直接选取/拖动地图选取/搜索地点选取等多种⽅式实现地点的选择,页⾯真的是很好看啊。完全长在了我的审美点上。哈哈。
唯⼀的缺点就是,这个默认使⽤的腾讯地图,但是腾讯地图检索不是很精确,不如⾼德。
下⾯介绍⾼德地图的使⽤⽅式
3. 使⽤⾼德地图api调取地图并实现选取地点的功能
代码如下:
getMapLocation0(){
type: 'wgs84',
success: (res)=>{
if(this.formData2.longitude && this.formData2.latitude){
uni.navigateTo({
url:"/pages/user/map?lng="+this.formData2.longitude+"&lat="+this.formData2.latitude
})
}else{
uni.navigateTo({
url:"/pages/user/map?lng="+res.longitude+"&lat="+res.latitude
},
fail:()=>{
success: (res) => {
console.log(res);
var status = res.authSetting;
if(!status['scope.userLocation']){
uni.showModal({
title:"是否授权当前位置",
content:"需要获取您的地理位置,请确认授权,否则地图功能将⽆法使⽤",      success:(tip)=>{
firm){
uni.openSetting({
success:(data)=>{
if(data.authSetting['scope.userLocation']===true){
uni.showToast({
title:"授权成功",
icon:"success",
duration:1000
})
type: 'wgs84',
success: (res)=>{
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
uni.navigateTo({
url:"/pages/user/map?lng="+res.longitude+"&lat="+res.latitude
})
}
})
}else{
uni.showToast({
title:"授权失败",
icon:"none",
duration:1000
})
}
}
})
}
}
})
}else{
type: 'wgs84',
success: (res)=>{
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
uni.navigateTo({
url:"/pages/user/map?lng="+res.longitude+"&lat="+res.latitude
})
}
})
}
},
fail: (res) => {
uni.showToast({
title:"调⽤授权窗⼝失败",
icon:"none",
duration:1000
})
}
})