Question

我是网络初学者，并制作了一个带谷歌地图和标记的网页。管理员可以监控移动设备的位置，该位置在一段时间间隔后将其坐标（经度，纬度）发送到服务器，这些坐标存储在具有特定ID的数据库中。

当坐标发生变化时，标记的位置应该会发生变化，我无法理解它是如何完成的。

我已经制作了php文件来获取坐标，但无法理解如何继续进行。

这是我到目前为止所做的网页：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map { width: 1000px;height: 500px;}
    </style>         
    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
      var latlng = {lat: 31.54972, lng: 74.34361};
      function initialize() 
      {
        var mapCanvas = document.getElementById('map');

        var mapOptions = 
        {
          center: latlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
          position: latlng,
          title: "Hello World!"
        });

        marker.setMap(map);
      } 
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

这里是从数据库中获取坐标的php文件：

<?php
 define('HOST','localhost');
  define('USER','root');
  define('PASS','');
  define('DB','coordinates');
  $con = mysqli_connect(HOST,USER,PASS,DB);
  $id = $_GET['id'];
  $query = "SELECT longitude,latitude FROM data";
  $qry_result = mysqli_query($con,$query) or die(mysqli_error());       
   // Insert a new row in the table for each person returned
   while($row = mysqli_fetch_array($qry_result)) {
     $longitude = $row['longitude'];
     $latitide = $row['latitude'];        
   }             
?>

Answer 1

好的，我将首先向您展示测试数据的结果，以便您了解地图的方式。

我添加了jQuery来进行Ajax调用。 Ajax允许webbrowser浏览您网站上的任何页面，而无需离开页面。用户没有注意到任何事情

拉普雷在一条线上得到10分。 Cookies存储索引（0到9）。

testdata.php

<?php  
  // this test loops a trajectory through Lahore, in 10 steps.
  // every 10 steps it goes back to the start
  // it's just test data, to show the map is working
  // $start = 31.468885630398272,74.24052429199217 
  // $end   = 31.572736162286912,74.43412613868712
  $i = (isset($_COOKIE['i']) ? $_COOKIE['i'] + 1 : 0) % 10;
  setcookie('i', $i);
  echo json_encode(array(
    'lat'=>31.468885630398272 + (31.572736162286912 - 31.468885630398272) * $i / 10,
    'lng'=>74.24052429199217 + (74.43412613868712 - 74.24052429199217) * $i / 10
  )); 
  exit;
?>

的index.php

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map { width: 1000px;height: 500px;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>        
    <script>
      var latlng = {lat: 31.54972, lng: 74.34361};
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: latlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
          position: latlng,
          title: "Hello World!",
          map: map   // replaces marker.setMap(map);
        });

        // now let's set a time interval, let's say every 3 seconds we check the position
        setInterval(
          function() {
            // we make an AJAX call
            $.ajax({
              dataType: 'JSON',   // this means the result (the echo) of the server will be readable as a javascript object
              url: 'testdata.php',
              success: function(data) {
                // this is the return of the AJAX call.  We can use data as a javascript object

                // now we change the position of the marker
                marker.setPosition({lat: Number(data.lat), lng: Number(data.lng)});

              }
            })
          }
          , 3000    // 3 seconds
        );
      } 
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

所以现在你真正的php文件。

调用它（例如）ajax.php。在index.php的第31行将'testdata.php'更改为'ajax.php'

我认为应该是这样，尽管我没有用数据库测试它。自己检查一下

我假设您有一个AUTOINCREMENT ID，但这也可以通过时间戳来完成，或者

ajax.php

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');

$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];

$query = "SELECT id, longitude, latitude FROM data ORDER BY id DESC LIMIT 1";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());       
 // Insert a new row in the table for each person returned
 if($row = mysqli_fetch_array($qry_result)) {  // whenever you only need 1 record, use "if" instead of "while"
   $longitude = $row['longitude'];
   $latitude = $row['latitude']; 
   // echo the object
   echo json_encode(array(
     'lat'=>$latitude,
     'lng'=>$longitude
   )); 
 }
 exit;     
?>

一段时间后，当数据库中的坐标发生变化时，如何在谷歌地图上设置标记？

1 个答案: