如何获取地理位置信息，然后无需单击按钮即可自动提交表单
我想调用一个页面以获取地理位置，然后将表单自动提交到我的php页面，$_REQUEST getlat而getlon无需单击提交按钮。这就是我所拥有的。在浏览器检查器中，我看到了地理位置值，但不会自动提交。我尝试onload在body标签中使用该函数，但随后发现一次只能调用一个函数，而且我还是认为这是一种不好的做法。我已经看到了另一个类似的问题，但是不能拼凑起来。谢谢你的帮助
<html>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
showPosition,
positionError
);
}
}
function showPosition(position) {
document.getElementById('getlat').value = position.coords.latitude;
document.getElementById('getlon').value = position.coords.longitude;
lon = document.getElementById('getlon').value;
lat = document.getElementById('getlat').value;
}
function positionError(error) {
if (error.PERMISSION_DENIED) alert('Please accept geolocation');
hideLoadingDiv();
showError(
'Geolocation is not enabled. Please enable to use this feature'
);
}
</script>
<script>
function PageLoad() {
getLocation();
document.frm1.submit();
}
</script>
<body>
<script>
window.onload = PageLoad();
</script>
<form action="results.php" name="frm1">
<input type="hidden" name="longitude" id="getlon" />
<input type="hidden" name="latitude" id="getlat" />
</form>
</body>
</html>
慕丝72912552回答
-
慕婉清6462132
您必须不了解javascript的异步特性，否则这是一个非常简单的问题。无论如何，我解释当页面加载并找到window.onload=PageLoad();它时，调用该PageLoad()函数，然后function PageLoad() { getLocation(); // <-- gets called document.frm1.submit(); // <-- doesn't wait for getLocation() to complete; // rather runs right away}如您所料，在getLocation()执行任务时（在“线程” A中）document.frm1.submit();被运行（在另一线程“ B”中），并提交了您不期望的表单。因此，您需要做的是将提交相关代码移入showPosition()浏览器中，以便一旦浏览器获取位置然后提交表单。function showPosition(position) { document.getElementById("getlat").value = position.coords.latitude; document.getElementById("getlon").value = position.coords.longitude; lon=document.getElementById("getlon").value; lat=document.getElementById("getlat").value; document.frm1.submit(); <-- submits when browser gets the users location} -
慕码人8056858
根据mdn文档getCurrentPosition（）方法。这将启动一个异步请求以检测用户的位置您正在发送表格，然后再获取坐标。解决方案是仅在异步请求结束时才使用更新后的隐藏输入的值发送此表单。请尝试以下示例有这个HTML<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <form action="results.php" name="frm1"> <input type="hidden" name="longitude" id="getlon" /> <input type="hidden" name="latitude" id="getlat" /> </form> <script src="geo.js"></script> </body></html>JSdocument.addEventListener('DOMContentLoaded', () => { pageLoad();});function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, positionError); }}function showPosition(position) { console.log(position); document.getElementById('getlat').value = position.coords.latitude; document.getElementById('getlon').value = position.coords.longitude; lon = document.getElementById('getlon').value; lat = document.getElementById('getlat').value; document.frm1.submit(); // here the form is submit}function positionError(error) { if (error.PERMISSION_DENIED) alert('Please accept geolocation'); hideLoadingDiv(); showError('Geolocation is not enabled. Please enable to use this feature');}function pageLoad() { getLocation();}我在这里使用DOM准备就绪时
随时随地看视频慕课网APP
相关分类
JavaScript