先情景复现一下:
使用微信小程序开发时,先请求用户的模糊地址:
onLoad(options) {
wx.getFuzzyLocation({
type: 'wgs84',
success: (result) => {
this.setData({
latitude: result.latitude,
longitude: result.longitude
});
},
fail: (res) => {
console.log("获取失败!")
},
complete: (res) => {
}
});
然后再使用腾讯自家的位置服务的接口去逆解析地址(别问,问就是个人开发者免费,还得是用这个):
let key = "这里是自己的key";
key = encodeURIComponent(key);
wx.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${key}&location=${this.data.latitude},${this.data.longitude}`,
method: "GET",
// Header:"Content-Type:application/json",
success: (res) => {
console.log(res.data.result);
console.log(res.data.result.address_component.city);
this.setData({
})
},
fail: (res) => {
console.log("地理位置请求失败");
console.log(res);
}
})
},
每次都是请求回来的结果为Ocean,我就奇了怪了:
好嘛,这应该是参数没传进去,我data域设置的默认值就是两个0
后面尝试打印了一下参数到控制台,终于找到问题的原因:
微信小程序它的代码执行顺序是不同于正常逻辑的,它不是按照代码编写的顺序来顺序执行,它似乎是异步执行的。在这里,出现问题的原因是request请求先于获取定位的请求执行了,所以一直都是传入默认的“0,0”的数据进去
解决办法:把request的这段代码放在获取定位的complete里,像这样:
wx.getFuzzyLocation({
type: 'wgs84',
success: (result) => {
this.setData({
latitude: result.latitude,
longitude: result.longitude
});
},
fail: (res) => {
console.log("获取失败!")
},
complete: (res) => {
let key = "你自己的key";
key = encodeURIComponent(key);
wx.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${key}&location=${this.data.latitude},${this.data.longitude}`,
method: "GET",
success: (res) => {
console.log(res.data.result);
console.log(res.data.result.address_component.city);
this.setData({
})
},
fail: (res) => {
console.log("地理位置请求失败");
console.log(res);
}
})
}
});
完美