为了账号安全,请及时绑定邮箱和手机立即绑定

如何获取地理位置信息,然后无需单击按钮即可自动提交表单

如何获取地理位置信息,然后无需单击按钮即可自动提交表单

慕丝7291255 2021-05-07 18:18:31
我想调用一个页面以获取地理位置,然后将表单自动提交到我的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>
查看完整描述

2 回答

?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

您必须不了解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

}


查看完整回答
反对 回复 2021-05-13
?
慕码人8056858

TA贡献1803条经验 获得超6个赞

根据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>

JS


document.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准备就绪时


查看完整回答
反对 回复 2021-05-13
  • 2 回答
  • 0 关注
  • 207 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信