个人中心
gpt4 book ai didi

javascript - 使用地理位置 API 设置表单输入

转载 作者：行者123 更新时间：2023-12-02 20:46:32 29 4
gpt4 key购买 nike

我是一个 javascript 菜鸟，我正在尝试使用 Firefox 3.5 中新的地理定位 API 来估计用户的坐标并将其放入表单的文本框中。我所拥有的似乎不起作用；似乎在实际检索位置之前，方框已被填满。这是我到目前为止所拥有的:

<html>
<head>
    <script type="text/javascript">
        var lati =0;
        var longi =0;
        function getPosition(position) 
        {
            lati = position.coords.latitude;
            longi = position.coords.longitude;
        }

        function writeLati(form)
        {
            if (navigator.geolocation) { 
                navigator.geolocation.getCurrentPosition(getPosition);
                lati = position.coords.latitude;
                longi = position.coords.longitude;
                form.latitude.value = lati;
                form.longitude.value = longi;
            } else {
                form.latitude.value = "3";
                form.longitude.value = "5";
                document.write("Your shitty browser can't do geolocation. Get Firefox 3.5.");
            }

        }



    </script>
</head>
<body onLoad="writeLati(locform)">



    <form name="locform" action="submit.php" method="post" >
    Latitude: <input type="text" name="latitude" value=""/>
    Longitude: <input type="text" name="longitude" value="" />
    Gender: <input type="radio" name="gender" value="Male" /> Male <input type="radio" name="gender" value="Female" checked="checked" /> Female
    <input type="submit"  />
    </form> 


</body>

最佳答案

表单字段会提前填充，因为 getCurrentPosition 是异步的。您想要在回调函数中填充表单字段(此时 position 实际上将填充数据)，更像是这样:

function getPosition(position) 
{
    lati = position.coords.latitude;
    longi = position.coords.longitude;
    form.latitude.value = lati;
    form.longitude.value = longi;
}

当然，您应该添加一些错误处理，因为 navigator.geolocation 的存在并不能保证该位置可用。 (此外，您应该向用户明确表示，在提交表单之前您不会存储位置 - 很多人可能会被自动填写位置的表单吓跑。)

关于javascript - 使用地理位置 API 设置表单输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1075127/

29 4 0
文章推荐： javascript - 使用 AJAX 加载原始图像数据
文章推荐： javascript - 使用特定值填充表格报告(多个记录)
文章推荐： javascript - Asp.net modalPopupExtender 重新定位
文章推荐： php - 发起 POST 请求，执行操作，然后完成 POST 请求 - 如何？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com