Google Maps API当前位置不断更新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Maps API当前位置不断更新相关的知识,希望对你有一定的参考价值。

我正在将Google Maps API集成到应用程序中,Google Maps API需要我当前的位置。

我可以按预期提供当前位置,但如何使用我的实时位置动态更新它?

这是我的代码:

@push('scripts')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initMap" async defer></script>
<script>
    // Loading in google maps
    function initMap() {
        let spain = {lat: 40.4637, lng: -3.7492};
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: spain
        });

        let infoWindow = new google.maps.InfoWindow;
        let markers = {!! $markers->toJson() !!};

        let hotspotLoc = {
            lat: Object.values(markers)[0].lat,
            lng: Object.values(markers)[0].lng
        };
        map.setCenter(hotspotLoc);

        // Loading in Markers from the database
        $.each(markers, function (key, marker) {
            let id = marker.id;
            let name = marker.name;
            let addres = marker.addres;
            let lesson = 0;
            if (marker.lesson && marker.lesson.length > 0) {
                lesson = marker.lesson[0].id;
            }

            let lat = marker.lat;
            let lng = marker.lng;
            let type = marker.type;

            let markerLatlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            let mark = new google.maps.Marker({
                position: markerLatlng,
                map: map,
                lesson: lesson,
            });


            new google.maps.event.trigger(markers, 'click');

            mark.setMap(map);
        });
    }

    function handleLocation(browserGeoLocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeoLocation ? 'Error: The Geolocation service has failed!' :
            'Error: Your browser doesn/t support Geolocations!');

        infoWindow.open(map);
    }

    function disableLesson() {
        const listOfLesson = $(".lockLesson:not(.disabled)").slice(1);
        listOfLesson.each(function() {
            $(this).addClass('disabled');
            //$(this).find('.d-flex .btn-dark').append('<div class="fas fa-lock fa-lg mx-2"></div>');
            $(this).find('.d-flex .d-none').removeClass("d-none");
        });
    }

    $(() => {
        disableLesson();
    });
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtqWsq5Ai3GYv6dSa6311tZiYKlbYT4mw&callback=initMap">
</script>

@endpush

希望有人知道如何让它可更新,以便我可以继续我的项目。

答案

你必须使用setInterval javascript函数

            // call funtion to get and set location
            setInterval(function () {
                // Call function get and set location
            }, 5000);

参考:https://gist.github.com/pawel-dubiel/3714643/36d78efa85fa413fff79669423de5ec08c77e34c

以上是关于Google Maps API当前位置不断更新的主要内容,如果未能解决你的问题,请参考以下文章

Google maps api v3,定义用户当前位置

Google Maps API:获取当前位置 iOS 的坐标

将相机重定向到当前位置 Google Maps API v2

Google Maps Android api v2 和当前位置

如何使用来自 Firebase Google Maps API Android 的数据更新标记位置

是否可以使用 Google Maps API 获取当前交通时间以获取精确路线?