Question

我正在尝试获取具有地理位置的实时坐标。我使用setInterval每1秒刷新一次脚本，但是这样做时，它会清除lat $ lng输入字段，而不是获取新坐标。

<form action="done.php" method="post" name="position">
  <input type="text" name="lng" id="lng" class="form-control" value="">
  <input type="text" name="lat" id="lat" class="form-control" value="">
  <input type="submit" class="btn btn-primary" value="Update location">
</form>


<script>
$(function (getLocation) {
    var Geo = {};
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    }
    function success(position) {
        Geo.lat = position.coords.latitude;
        Geo.lng = position.coords.longitude;

        populateHeader(Geo.lat, Geo.lng);

    }
    function error() {
        console.log("Geocoder failed");
    }
    function populateHeader(lat, lng) {
        $('#lat').val(lat);
        $('#lng').val(lng);

    }
setInterval(function(){populateHeader()},1000);
});
</script>

Answer 1

您的代码每秒都会清除一次字段，因为您正在调用populateHeader()回调函数中不带参数的setInterval，然后将这两个字段都设置为undefined。要执行您最初想要的操作，setInterval回调函数将需要再次调用.getCurrentPosition()。

但是，.getCurrentPosition()已经是一个异步调用，如果要花费15秒来获取GPS修复，您将以一秒的间隔排队15个函数调用。在成功和错误回调结束时，可以通过使用setTimeout()而不是setInterval()来解决此问题，这将确保在上一个查询完成后第二秒开始下一个查询。

但是，有一个更简单的解决方案。如果您查看Geolocation API documentation，它已经有一个.watchPosition()方法，该方法将在每次位置更改时触发回调，并接受与一次性.getCurrentPosition()方法相同的参数。使用该代码将使您的代码更整洁并可能更有效。

<form action="done.php" method="post" name="position">
    <input type="text" name="lng" id="lng" class="form-control" value="">
    <input type="text" name="lat" id="lat" class="form-control" value="">
    <input type="submit" class="btn btn-primary" value="Update location">
</form>


<script>
    $(function () {
        var Geo = {};

        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(
                function (position) {
                    // Success
                    Geo.lat = position.coords.latitude;
                    Geo.lng = position.coords.longitude;

                    $('#lat').val(Geo.lat);
                    $('#lng').val(Geo.lng);
                },
                function () {
                    // Error
                    console.log("Geocoder failed");
                }
            );
        }

    });
</script>

使用setInterval更新地理位置信息

1 个答案: