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

【问题标题】：How to set markers on google map after some time when coordinates in database changes?当数据库中的坐标发生变化时，如何在谷歌地图上设置标记？
【发布时间】：2016-04-18 05:18:22
【问题描述】：

我是网络初学者，并制作了一个带有谷歌地图和标记的网页。管理员可以监控手机的位置，并在一段时间后将其坐标（经度、纬度）发送到服务器，这些坐标以特定的 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'];        
   }             
?>

【问题讨论】：

那只有 1 个标记，对吧？ 1 发送数据的手机，每次都会向 DB 表中插入一条记录。所以在检查时，我们只需要最后一个值。我理解正确吗？
嗨，使用我最新更新的代码，我刚刚编辑了它。让我知道它是否适合你
和之前一样，只是一个标记在一个固定的位置，不会移动
你能给我发电子邮件吗？ emmanueldelay@gmail.com
是的，一定要检查收件箱

标签： google-maps

【解决方案1】：

好的，我先用测试数据给你看结果，让你看看地图的表现。

我添加 jQuery 来进行 Ajax 调用。 Ajax 让网络浏览器可以浏览您网站上的任何页面，而无需离开该页面。用户没有注意到发生的任何事情

通过拉合尔的直线上有 10 个点。 Cookie 存储索引（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;     
?>

【讨论】：