今天在做一个定位功能,需要用户授权。
如果用户没有授权定位,就显示授权询问页面(这其实是调用wx.openSetting())这个接口。
如果用户允许了授权定位,就调用wx.getLocation()接口获取经纬度,最后根据获取的这个经纬度,把数据传递给后台,获取当前城市和周边城市数据,再用户点击位置按钮时,跳转至城市显示页面。
具体代码如下:
//wxml
<view class='search-place' bindtap="openAuthLocation">
<view class='place'>{{cityName}}</view>
<image class='triangle' src='/images/down-triangle.png'></image>
</view>
//js
//因为是一个组件,所以使用created钩子函数
created: function() {
//获取地理位置的经纬度
this.getLocation()
},
打开的询问页面是这样的
methods: {
getLocation: function () {
wx.getLocation({
type: 'wgs84', //表示使用GPS定位
success: (res) => {
console.log("定位成功 = ", res)
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
调用后台接口获取数据
this.getHomieData()
},
//表示用户没有开启授权
fail: (res) => {
this.setData({
errMsg: res.errMsg
})
console.log(this.data)
wx.showToast({
title: '已取消定位服务,点击地址,可授权开启定位服务',
icon: 'none'
})
}
})
},
openAuthLocation: function () {
console.log("openAuthLocation = ", this.data)
if (!this.data.cityName) {
//打开授权页面
wx.openSetting({
success: (res) => {
let data = res.authSetting
if (data['scope.userLocation']) {
this.getLocation()
}
}
})
} else {
//跳转至城市显示页面
wx.navigateTo({
url: '/entries/posPlace/posPlace',
})
}
},
getHomieData: function() {
wx.request({
url: '。。。。',
method: 'POST',
data: {
city: this.data.cityName,
lng: this.data.longitude,
lat: this.data.latitude
},
success: (res) => {
this.setData({
cityName: res.data.location.city_name
})
wx.setStorageSync('positionInfo', res)
}
})
}
}
城市显示页面如下
当我点击下面周边城市的时候,回回到显示当前城市的页面,一开始我使用wx.navigateBack({url: ''})
,虽然可以返回去,但数据没有更新。
那我就想,用wx.navigateTo({url: ''})
传参的形式,然后更新数据,发现这里根本就跳转不到上一页(具体原因不明,有知道的还请指教)。
接着,我搜文档,又试试wx.redirectTo()
,这个跟wx.navigateTo({url: ''})
是一样的效果,页跳不回上一页。
最后,使用wx.reLaunch()
,页面返回去了,数据也更新了。