我需要点击一个Ajax的按钮时,然后才将表单数据发送到要采取的行动访问者的位置。
到目前为止,我能够基于一类存在有条件地提交。
问题是,在我的代码navigator.geolocation条件没有得到尽管同意弹出出现用户和被点击确定解析。它只是跳过这一点,显示回退位置。
这是我改变了默认帆Ajax的按钮组件:
methods: {
click: async function () {
let btnDelayed = document.getElementById('btn-search');
if (btnDelayed && btnDelayed.classList.contains('delayed')) {
console.log('btn-search cannot emit click');
await this.loadGeoData();
} else {
console.log('btn-search can emit click ');
this.$emit('click');
}
},
loadGeoData: async function () {
let loc = await this.getLocation();
console.log('location');
console.dir(loc);
/*
let test = {
lat: 0.22,
lng: 0.55
};
*/
let btnSubmit = document.getElementById('btn-search');
btnSubmit.classList.remove('delayed');
let pos = JSON.stringify(loc);
this.$emit('pos', pos);
console.log('pos event value ' + pos);
this.click();
},
getLocation: async function () {
let loc = {
lat: 0,
lng: 0
};
if (navigator.geolocation) {
let options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
};
console.log('geolocation loaded');
navigator.geolocation.getCurrentPosition(function (position) {
console.log('getting position...');
console.dir(position);
loc.lat = position.coords.latitude;
loc.lng = position.coords.longitude;
}, (err) => {
console.warn(`ERROR(${err.code}): ${err.message}`);
}, options);
}
return loc;
}
}
这里是控制台日志输出:
btn-search cannot emit click
geolocation loaded
location
{…}
lat: 0
lng: 0
<prototype>: Object { … }
pos event value {"lat":0,"lng":0}
btn-search can emit click
// getting the data in the instance
argins
{…}
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
actionref: "{\"lat\":0,\"lng\":0}"
actiontype: "word"
search:
该navigator.geolocation.getCurrentPosition不顺执行,但表格后提交:
getting position... ajax-button.component.js:108:13
Position
coords: Coordinates { latitude: 44.00000000000, longitude: 26.00000000000, accuracy: 931, … }
timestamp: 1548163982134
_
当然,我需要它之前执行。
欲了解更多的读者,
搜索后的日子里,我发现这个职位,Catch Geolocation Error - Async Await,解释如何使地理位置工作,异步/等待。
剩下的只是修改Ajax的按钮组件的单击事件的问题。