Блог

Я пытаюсь получить текущие координаты с помощью геолокации. Я использовал 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>
  

Ваш код очищает поля каждую секунду, потому что вы вызываете populateHeader() без параметров в функции setInterval обратного вызова, которая затем устанавливает оба поля undefined равными . Чтобы сделать то, что вы изначально хотели, функция setInterval обратного вызова должна быть вызвана .getCurrentPosition() снова.

Однако .getCurrentPosition() это уже асинхронный вызов, и если для получения исправления GPS требуется 15 секунд, вы должны поставить в очередь 15 вызовов функций с интервалом в одну секунду. Вы могли бы обойти эту проблему, используя setTimeout() вместо setInterval() в конце ваших успешных и ошибочных обратных вызовов, что позволило бы запустить следующий запрос через секунду после завершения предыдущего.

Однако есть более простое решение. Если вы посмотрите документацию API геолокации, в ней уже есть .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>