不断更新谷歌地图与用户位置

Continuously updating Google Maps with user location

本文关键字：用户 位置 谷歌地图 更新      更新时间：2023-09-26

我对Web开发和构建具有Google地图的Web应用程序非常陌生，并希望使用用户位置不断更新地图。我能够正确地从我的数据库中读取值，并且可以在地图上显示它，但只有一次。我在任何地方都找不到如何不断更新位置（希望不要重新加载页面）。有人可以帮助提供有关如何解决此问题的一些指导吗？以下是我的一些代码供参考： 

<?php include_once('location.php') ?>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My GeoLocation</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

    <script>
var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(<?php echo $current_lat ?>, <?php echo $current_long ?>);
  var mapOptions = {
    zoom: 14,
    center: myLatlng
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'TEST'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

//READ FROM CLIENT (POST)
$content = file_get_contents('php://input');
$post_data = json_decode($content , true);
$lat = $post_data['lat'];
$long = $post_data['long'];
$speed = $post_data['speed'];
$hacc = $post_data['hacc'];
$vacc = $post_data['vacc'];
$timestamp = $post_data['timestampe'];

//CONNECT TO MYSQL
$con1 = mysql_connect("localhost", "xxxxxxxx", "bbbbbb", "yyyyyy");
if ($con1->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
$db_selected = mysql_select_db('yyyyyy');
if (!$db_selected) {
    die ('Can''t use foo : ' . mysql_error());
}
if (!empty($lat)) {
  $sql = "INSERT INTO LocationInfo (latitude, longitude, speed, hor_acc, ver_acc, d) 
                VALUES ('$lat', '$long', '$speed', '$hacc', '$vacc', '$timestamp');";
  mysql_query($sql) or die ('Error updating database: ' . mysql_error());
 }
$read_query = "SELECT * FROM LocationInfo;";
$results = mysql_query($read_query) or die ('Error reading from database: ' . mysql_error());
$column = array();
while($row = mysql_fetch_array($results)){
    $column[] = $row;
}
$current_lat = $column[sizeof($column) - 1]['latitude'];
$current_long = $column[sizeof($column) - 1]['longitude'];
?>

Google Maps JavaScript 参考

您可以使用 marker.setPosition( new LatLng(...) ) 更新标记，或者换句话说，只需分配一个新位置。在我看来，您是在输入字段中放置您的位置，而不是提交、读取字段并设置标记并将位置保存在数据库中。如果要更新标记的位置，可以再次使用输入字段，使用 JavaScript 读取字段值，然后更新标记的位置（使用 marker.setPosition（））。如果要再次将其传递给数据库，可以使用 AJAX 另外将数据传递给脚本。这取决于你在做什么，想做什么。

评论后编辑

您可以设置一个JavaScript函数，该函数将向PHP脚本发出AJAX请求，并在获取数据后更新位置。然后每隔 x 秒调用一次脚本。使用 setTimeout 创建延迟，然后在获取数据后使函数使用另一个超时调用自身。省去麻烦，使用库来处理AJAX调用 - jQuery间接为您提供了很多支持，因为很多人都在使用它。你还需要确保你的PHP脚本除了位置信息之外不会给你任何回报，而不是像现在这样给你整个html文件。所以简化了这样的事情：你有一个PHP文件，它以JSON的形式发送lat/lng对，这个脚本大约每10秒从浏览器调用一次。当然，可能会冒出一些小东西...请注意，我不做PHP。

get_position.php 

...
$latLng = array('lat' => $lat, 'lng' => $lng);
echo json_encode($latLng);

JS， using jQuery.ajax

var marker = ....
var delay = 10000; // 10 second delay
function updatePosition() {
    $.ajax({
        url: path/to/get_position.php,
        dataType: 'json'
    })
    .done(function callDone(data) {
        // update marker position
        var latLng = new google.maps.LatLng( data.lat, data.lng );
        marker.setPosition( latLng );
        // call the function again
        setTimeout( updatePosition, delay );
    });
}
// call the function initally
setTimeout( updatePosition, delay );
相关文章：