打开manifest.json,点击微信小程序配置,选择位置接口,在描述内输入:
需要获取您的地理位置,请确认授权,否则地图功能将无法使用
执行上一步操作之后,再打开源码视图,可以看到截图中这一段话,这一段话是自动出现的,表示上一步操作成功
1、点击图标,跳转到选择地址页面
<view style="display: flex;align-items: center;" @tap='chooseLocation'></view>
chooseLocation(){
uni.chooseLocation({
latitude:this.detail.lat,
longitude:this.detail.lng,
success:(res)=> {
console.log(res);
this.detail.lng = res.longitude
this.detail.lat = res.latitude
this.detail.locationName = res.name
this.detail.location = res.address
},
fail:()=>{
// 如果用uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息
uni.getSetting({
success: (res) => {
console.log(res);
var status = res.authSetting;
var authLocation;
//#ifdef MP-ALIPAY
authLocation = status.location;
//#endif
//#ifdef MP-WEIXIN
authLocation = status['scope.userLocation'];
//#endif
if(!authLocation){
// 如果授权信息中没有地理位置的授权,则需要弹窗提示用户需要授权地理信息
uni.showModal({
title:"是否授权当前位置",
content:"需要获取您的地理位置,请确认授权,否则地图功能将无法使用",
success:(tip)=>{
if(tip.confirm){
// 如果用户同意授权地理信息,则打开授权设置页面,判断用户的操作
uni.openSetting({
success:(data)=>{
// 如果用户授权了地理信息在,则提示授权成功
if(data.authSetting['scope.userLocation']===true){
uni.showToast({
title:"授权成功",
icon:"success",
duration:1000
})
// 授权成功后,然后再次chooseLocation获取信息
uni.chooseLocation({
success: (res) => {
console.log("详细地址",res);
this.detail.lng = res.longitude
this.detail.lat = res.latitude
this.detail.locationName = res.name
this.detail.location = res.address
}
})
}else{
uni.showToast({
title:"授权失败",
icon:"none",
duration:1000
})
}
}
})
}
}
})
}
},
fail: (res) => {
uni.showToast({
title:"调用授权窗口失败",
icon:"none",
duration:1000
})
}
})
}
});
},
2、打开内置地图并通过外部地图进行导航
<text class="address-button-text" @tap='openMap'>导航</text>
//打开内置地图并通过外部地图进行导航
//打开内置地图并通过外部地图进行导航
openMap() {
if(!this.order.ordersTakeaway.lat||!this.order.ordersTakeaway.lat){
uni.showToast({
title: "地址错误",
icon: "none",
duration: 1000
})
return
}
uni.getLocation({
type: 'gcj02',
success: (res) => {
uni.openLocation({
latitude: Number(this.order.ordersTakeaway.lat),
longitude: Number(this.order.ordersTakeaway.lng),
name: this.order.ordersTakeaway.locationName,
address: this.order.ordersTakeaway.location,
scale: 12,
success: function() {
console.log('success');
},
fail: function(res) {
console.log(res);
// 如果用uni.chooseLocation没有获取到地理位置,则需要获取当前的授权信息,判断是否有地理授权信息
uni.getSetting({
success: (res) => {
var status = res.authSetting;
if (!status['scope.userLocation']) {
// 如果授权信息中没有地理位置的授权,则需要弹窗提示用户需要授权地理信息
uni.showModal({
title: "是否授权当前位置",
content: "需要获取您的地理位置,请确认授权,否则地图功能将无法使用",
success: (tip) => {
if (tip.confirm) {
// 如果用户同意授权地理信息,则打开授权设置页面,判断用户的操作
uni.openSetting({
success: (data) => {
// 如果用户授权了地理信息在,则提示授权成功
if (data
.authSetting[
'scope.userLocation'
] === true
) {
uni.showToast({
title: "授权成功",
icon: "success",
duration: 1000
})
// 授权成功后,然后再次getLocation获取信息
uni.getLocation({
type: 'gcj02',
success: (res) => {
uni.openLocation({
latitude: Number(this.order.ordersTakeaway.lat),
longitude: Number(this.order.ordersTakeaway.lng),
name: this.order.ordersTakeaway.locationName,
address: this.order.ordersTakeaway.location,
scale: 12,
success: function() {
console.log('success');
},
fail: function(res) {
console.log(res);
},
})
},
})
} else {
uni.showToast({
title: "授权失败",
icon: "none",
duration: 1000
})
}
}
})
}
}
})
}
},
fail: (res) => {
uni.showToast({
title: "调用授权窗口失败",
icon: "none",
duration: 1000
})
}
})
},
})
},
fail: (res) => {
console.log(res)
}
})
},