Question

如何在没有谷歌地图刷新的情况下每隔x秒显示一次谷歌地图？

1.Markers latLong来自数据库。

2.在谷歌地图上分配这些标记。

3.Markers的latLong在30秒后发生变化。

问题是谷歌地图得到刷新。所有我想要的谷歌地图应该显示而不刷新更新的LatLong。

这是我的代码。

<script>

    function initMap() {
        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 19.9518684, lng: 73.7354084}
        });

        var image = '<?php echo $getImagePath; ?>'
        for (var o in markers) {

            lat = markers[ o ].lat;
            lng = markers[ o ].lng;
            address = markers[ o ].address;

            var my = new google.maps.LatLng(lat, lng);
            //console.log(my);
            var marker = new google.maps.Marker({
                position: my,
                map: map,
                icon: image,

            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent("'" + address + "'");
                infowindow.open(map, marker);
            });

        }

    }

</script>

我尝试了google.maps.event.addDomListener(window, "load", initMap);和window.onload = initMap;，但没有成功。

任何人都可以帮助我吗？

Answer 1

我希望这段代码的重写能够帮助您顺利完成。就目前而言，问题中没有很多信息，所以我只能猜测

// note these are globals because they are set in initMap and used outside of it
var image = '<?php echo $getImagePath; ?>';
var map;
var infowindow;
var markers = [/* some initially loaded markers loaded as if by majick unicorn farts */];

function initMap() {
    infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 19.9518684, lng: 73.7354084}
    });
    doMarkers(true);
}
function doMarkers(firstLoad) {
    markers.forEach(marker => {
        var lat = marker.lat;
        var lng = marker.lng;

        marker.my = new google.maps.LatLng(lat, lng);

        if (firstLoad) { // marker has no marker the first time because it's not on a map yet
            marker.marker = new google.maps.Marker({
                position: marker.my,
                map: map,
                icon: image,

            });

            google.maps.event.addListener(marker.marker, 'click', function () {
                infowindow.setContent("'" + marker.address + "'");
                infowindow.open(map, marker.marker);
            });
        } else { // move existing marker
            marker.marker.setPosition(marker.my);
        }
    }
}
function magicallyFindAndUpdateMarkerDataUsingUnicornFarts(marker) {
    // find corresponding marker in markers array
    // update lat, lng and address
}
function doSomeAjaxToGetNewMarkerPositionsAndCallCallback(cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'someURI');
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        data.forEach(function(marker) {
           magicallyFindAndUpdateMarkerDataUsingUnicornFarts(marker); 
        });
        cb()
    }
    xhr.send();
}
setInterval(function () {
    doSomeAjaxToGetNewMarkerPositionsAndCallCallback(function() {
        doMarkers(false);
    });
}, 30000);

当然，我无法看到标记的加载方式（代码中的markers），也无法告诉您doSomeAjaxToGetNewMarkerPositionsAndCallCallback或magicallyFindAndUpdateMarkerDataUsingUnicornFarts应该是什么，因为您没有没有显示任何关于标记的代码

如何在没有刷新谷歌地图的情况下在x秒后显示谷歌地图标记？

1 个答案: