Обновите информацию о геолокации с помощью setInterval - PullRequest
Новая
       12

Обновите информацию о геолокации с помощью setInterval

0 голосов
/ 12 апреля 2019

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

0 голосов
/ 12 апреля 2019

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

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

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