前端解决百度地图地址逆解析(BMap.Geocoder())异步问题
前端解决百度地图地址逆解析(BMap.Geocoder())异步问题
需求:将接口返回的坐标数据转换成详细的地址并渲染在页面上
问题:页面先渲染,地址后解析,导致渲染时没有数据显示
解决方法:new Promise()
// 处理导出轨迹明细地址解析异步操作
getPosition(data) {
return new Promise((resolve, reject) => {
const temp = {};
let point = new BMap.Point(data.longitude, data.latitude);
let geoc = new BMap.Geocoder();
geoc.getLocation(point, (result) => {
let addr = result.addressComponents;
var full_address =
addr.city + addr.district + addr.street + addr.streetNumber;
temp.position = full_address;
return resolve(temp);
});
});
}
在想要获取转换后的地址数据的地方调用
exportFu() {
var params = {
imei: this.imei,
start_time: start,
end_time: end,
};
this.$where.track.history(params).then(async (data) => {
if (data.length == 0) {}
for (let i = 0; i < data.length; i++) {
const temp = await this.getPosition(data[i]);
this.exportData.push({
address: temp.position,
});
}
});
}