使用 setInterval 更新地理位置信息

Posted 2023-02-23

【中文标题】使用 setInterval 更新地理位置信息

【英文标题】：Update geolocation information with setInterval

【发布时间】：2019-04-12 13:55:27

【问题描述】：

我正在尝试通过地理位置获取实时坐标。我使用 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>

【参考方案1】：

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

但是，.getCurrentPosition() 已经是一个异步调用，如果需要 15 秒才能获得 GPS 定位，您将在 1 秒间隔内排队 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>