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

发布于 2024-07-25 14:19:23 字数 1513 浏览 3 评论 0 原文

我是一个 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>

I'm kind of a javascript noob, and I'm trying to use the new geolocation API in Firefox 3.5 to get an estimation of the user's coordinates and put that into a text box in a form. What I have doesn't seem to be working; it seems like the boxes are filled before the location is actually retreived. Here's what I have so far:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

酸甜透明夹心 2024-08-01 14:19:23

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

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

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

The form fields are getting filled early because getCurrentPosition is asynchronous. You want to fill the form fields in the callback function (at which point position will actually be filled with the data), something more like this:

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

Of course, you should add some error handling because the existence of navigator.geolocation isn't a guarantee that the location will be available. (Also, you should make it clear to users that you're not storing the location until the form is submitted -- a lot of people may be scared off by a form that fills in one's location automatically.)

遇到 2024-08-01 14:19:23

虽然这是一个老问题,但我最近遇到了类似的问题。 Geotext 在您可以放置​​类标签的任何地方进行动态地理位置文本替换。 例如:

<input name="city" class="geotext[city]" />
<input name="state" class="geotext[state]" />
<input name="zip" class="geotext[zip]" />

或者:

Hello, how is sunny <span class="geotext[city,state,country]"></span>?

https://github.com/Frizzled/geotext

Although it's an old question I recently ran-up against a similar issue. Geotext does on the fly geo-location text replacement anywhere you can drop a class tag. For example:

<input name="city" class="geotext[city]" />
<input name="state" class="geotext[state]" />
<input name="zip" class="geotext[zip]" />

Or:

Hello, how is sunny <span class="geotext[city,state,country]"></span>?

https://github.com/Frizzled/geotext

爱要勇敢去追 2024-08-01 14:19:23

这不是很实用 - 这是一个跨浏览器的 JavaScript 解决方案,并且使用来自 yahoo 等的第 3 方 API 来完成您想要做的事情。

http://icant.co.uk/geofill/index.php?demo=suggestion

this is not very practical - here is a javascript solution that is cross-browser and does exactly what you want to do, using 3rd party apis from yahoo etc.

http://icant.co.uk/geofill/index.php?demo=suggestion

凡尘雨 2024-08-01 14:19:23

本机地理定位是 FF3.5 的一项很酷的新功能,但目前跨浏览器解决方案是使用 Google API

当我使用它时,它给了我合理的结果,但请注意,准确度会因地区而异,如果你这样做,最好给你的用户一个地图,以便他们可以细化自动生成的位置。

Native Geolocation is a cool new feature of FF3.5, but for now a cross browser solution is to use the Google API

This has given me reasonable results when I've used it but be aware that the accuracy will vary quite a lot be region, if your doing this it's nice to give your users a map so that they can refine the automatically generated position.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文