Question

我对网络开发和构建具有谷歌地图的网络应用程序非常陌生，并且希望使用用户位置不断更新地图。我可以正确地从我的数据库中读取值，并且可以在地图上显示它，但只能显示一次。我无法在任何地方找到如何不断更新位置（希望无需重新加载页面）。有人可以帮忙解决一下如何处理这个问题吗？这里有一些我的代码供参考：

<?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'];

?>

Answer 1

Google Maps JavaScript reference

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

在评论后编辑

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

<强> get_position.php

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

JS，使用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 );

使用用户位置

1 个答案: