Question

每隔30秒，我希望在不重新加载地图的情况下重新加载谷歌地图上的位置。我做了以下事情：

使用其网址从gps设备中获取内容。
从网址获取经度和纬度。
在地图上显示纬度和经度。

我的代码是：

 <?php
    // hard coded latitude and longitude for an example
    $latitude = 28.70956;
    $longitude = 70.00767;
//In my code i have to fetch it from url every 30 seconds. And then Show them on the map
?>

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
        <script type="text/javascript">
        var map;
        function initialize() {
            // Set static latitude, longitude value
            var latlng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
            // Set map options
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            // Create map object with options
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <?php


                echo "addMarker(new google.maps.LatLng(".$latitude.", ".$longitude."), map);";
        ?>
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true, // enables drag & drop
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>
    </head>
    <body onload="initialize()">
        <div style="float:left; position:relative; width:1519px; border:0px #000 solid;">
            <div id="map_canvas" style="width:950px;height:900px;border:solid black 1px;"></div>
        </div>
    </body>
</html>

在此代码中，我正在执行获取位置并在地图上显示的所有步骤。但是如何在一段固定的时间后动态获取位置？我的问题不包含任何硬编码值，每次都需要从URL中提取值。

Answer 1

您可以使用setInterval和Ajax调用的组合。如果你的php变量每次都需要在没有页面加载的情况下使用Ajax获取数据。像这样的东西（如果你使用的是JQuery）。

setInterval(function() {
    var coords = getLatLng(); // Grab the coordinates from url
    updateMapMarker(coords); // Similar to what you've got
}, 30000); // 30 seconds

function getLatLng() {
    $.ajax({
        url: "your/route/that/returns/coordinates",
        success: function(data) {
            return [data.x, data.y];
        },
    });
}

点击此处查看JQuery Ajax： http://api.jquery.com/jquery.ajax/

在Google地图上显示位置更改，而无需反复重新加载地图

1 个答案: