Question

我在Raspberry Pi上有一个GPS装置。我想建立一个web应用程序，允许我跟踪RPi在特定时刻的位置。我在数据库中有来自GPS的lon和lan坐标。如何使用Google地图以便几乎实时显示路线？ Google地图是否支持此功能？或者我应该手动上传GPX文件。

Answer 1

我不懂Python。无论如何，让我给你一个PHP / MySQL示例。

服务器端唯一必须返回的是JSON字符串。类似的东西：

{"lat":"50.8657821000","lng":"4.2925975000"}

你可以找出python部分。

我拥有的数据只是布鲁塞尔的几个位置，每个Ajax调用都会返回一个随机行。同样，你的工作就是让合适的服务器端做你需要的工作。

SQL导出

CREATE TABLE city (
  id bigint(15) NOT NULL,
  longitude decimal(12,10) DEFAULT NULL,
  latitude decimal(12,10) DEFAULT NULL,
  name varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

INSERT INTO city (id, longitude, latitude, name) VALUES
(14275, 4.3515499000, 50.8427501000, 'brussel'),
(14279, 4.3796600000, 50.8625502000, 'schaarbeek'),
(14280, 4.3969658000, 50.8332318000, 'etterbeek'),
(14281, 4.3766927000, 50.8235717000, 'elsene'),
(14282, 4.3464309000, 50.8299126000, 'sint-gillis'),
(14283, 4.2986584000, 50.8238652000, 'anderlecht'),
(14284, 4.3193694000, 50.8569755000, 'sint-jans-molenbeek'),
(14285, 4.3250320000, 50.8632823000, 'koekelberg'),
(14286, 4.2925975000, 50.8657821000, 'sint-agatha-berchem');

ajax.php

<?php
$sql = "SELECT longitude, latitude
 FROM city
 ORDER BY RAND()
 LIMIT 1";

$db = mysql_connect('localhost', 'root', ''); // eigen login-gegevens invullen
mysql_select_db('stackoverflow');

$res = mysql_query($sql);
if ($row = mysql_fetch_assoc($res)) {
  $array = array(
    'lat'=>$row['latitude'],
    'lng'=>$row['longitude']
  ); 
}
$json_string = json_encode($array);
echo $json_string;
?>

的index.php

<div id="map-canvas"></div>
<br>
<input type="checkbox" id="auto_pan" onclick="auto_pan_clicked(this.checked)" checked="checked"> Keep the marker in the center of the map<br>
<input type="checkbox" id="auto_refresh" onclick="auto_refresh_clicked(this.checked)" checked="checked"> Keep refreshing the position<br>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script>
var auto_pan = true;  // see checkbox
var auto_refresh = true;  // see checkbox
// 
function initialize() {
  var timer = null;         // we will use this as a delay.        
  var timerInterval = 3000; // We set a 3 seconds refresh rate.  Feel free to change this value
  var robotMarker;

  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(50.5, 4.5),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  function getRobotPosition() {
    if(! auto_refresh) {
      // checkbox is not checked, so we don't get the new position.  We keep this loop running (with setTimeout), but we do nothing, until the client checkes the box again
      timer = setTimeout(getRobotPosition, timerInterval);
      return false; 
    }
    // Get the position (of the robot) from the DB
    $.ajax({
      url: 'ajax.php',
      dataType: 'JSON',
      success: function(response) {  // response contains an (JSON format) array of objects {lat: ..., lng: ...}
        var newPosition = new google.maps.LatLng(response.lat, response.lng);
        if (robotMarker) {
          // The marker already exists; we only need to refresh its position
          robotMarker.setPosition(newPosition);
        }
        else {
          // The first time, we need to create the marker
          robotMarker = new google.maps.Marker({
            icon: {
              url: 'http://www.zenbike.co.uk/common/icons/zenbike_raspi_40x40.png'
            },
            position: newPosition,
            title: "My Raspberry Pi",
            map: map
          });
        }
        if (auto_pan) {
          map.setCenter(newPosition);
        }
        // we call this function again, with a timeout
        timer = setTimeout(getRobotPosition, timerInterval);
      }
    });
  }
  // call getRobotPosition() the first time
  getRobotPosition();
}

// checkox functions; just sets the value of a global var
function auto_pan_clicked(checked) {
  auto_pan = checked;
}
function auto_refresh_clicked(checked) {
  auto_refresh = checked;
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
  height:400px;
}
</style>

跟踪GPS路线

1 个答案: