สคริป GPS tracking แบบ real time ครับ คือตอนนี้ ถ้าหากว่ามีการอัพเดตข้อมูล ผมจะต้องสั่ง refresh หมดทั้งหน้าน่ะครับ marker มันถึงจะเลื่อน และปุ่ม control เกี่ยวกับการ zoom และ ประเภทของ Map มันก็ จะกลับไปเป็นค่าเดิมน่ะครับ
Code (PHP)
<?
global $xflag,$abcde;
$xflag=$_REQUEST["flag"];
if($_SERVER["REQUEST_METHOD"]) {
$abcde = $_POST;
}
global $cnt;
$dbhost="localhost";
$dbuser="root";
$dbport="3307";
$dbpass="password";
$db_db="g4";
$ximei="354776035662243";
$incoming_file=getConfig("incoming_file");
$xkey=getConfig("xkey");
$xzoom=getConfig("xzoom");
$xtitle=getConfig("xtitle");
$homeurl=getConfig("homeurl");
$app_path=getConfig("app_path");
$showdistance=getConfig("showdistance");
$distmulti = getConfig("distmulti");
$auto_fare=getConfig("auto_fare");
$taxi_fare=getConfig("taxi_fare");
$ac_cab = getConfig("ac_cab");
$co_fare = getConfig("co_fare");
$currency = getConfig("currency");
$xwidth=getConfig("xwidth");
$xheight=getConfig("xheight");
$map_refresh=getConfig("map_refresh");
$xsnapon = getConfig("snapon");
$dull_lat=getConfig("dull_lat");
$dull_long=getConfig("dull_long");
$start_x=getConfig("start_x");
$last_x=getConfig("last_x");
$maxmarkers = getConfig("maxmarkers");
$device=getdevConfig($ximei, "device_no");
$mileage=getdevConfig($ximei, "mileage");
$linecolor=getdevConfig($ximei, "linecolor");
$linewidth=getdevConfig($ximei, "linewidth");
$car_desc=getdevConfig($ximei, "description");
function getConfig($label, $tab="gpstracker-config") {
global $dbhost, $dbuser, $dbport, $dbpass, $db_db;
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
echo "Unable to connect to DB: " . mysql_error();
exit;
}
if (!mysql_select_db($db_db)) {
echo "Unable to select $db_db: " . mysql_error();
exit;
}
$sql = "SELECT `value1` as xvalue1
FROM `$db_db`.`$tab`
WHERE `label` = '".$label."'";
$result = mysql_query($sql);
if (!$result) {
echo "Could not successfully run query ($sql) from DB: " . mysql_error();
exit;
}
if (mysql_num_rows($result) == 0) {
echo "No rows found, nothing to print so am exiting";
exit;
}
while ($row = mysql_fetch_assoc($result)) {
$val = $row["xvalue1"];
}
mysql_free_result($result);
return ($val);
}
function getdevConfig($imei, $label) {
global $dbhost, $dbuser, $dbport, $dbpass, $db_db;
$tab = 'device_info';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
echo "Unable to connect to DB: " . mysql_error();
exit;
}
if (!mysql_select_db($db_db)) {
echo "Unable to select $db_db: " . mysql_error();
exit;
}
$sql = "SELECT `$label` as label
FROM `$db_db`.`$tab`
WHERE `imei` = '".$imei."'";
$result = mysql_query($sql);
if (!$result) {
echo "Could not successfully run query ($sql) from DB: " . mysql_error();
exit;
}
if (mysql_num_rows($result) == 0) {
echo "No rows found, nothing to print so am exiting";
exit;
}
while ($row = mysql_fetch_assoc($result)) {
$val = $row["label"];
}
mysql_free_result($result);
return ($val);
}
function xdb_connect() {
global $dbhost,$dbport,$dbuser,$dbpass;
$link = mysql_connect($dbhost.":".$dbport, $dbuser, $dbpass);
if (!$link) {
die('Could not connect: ' . mysql_error());
}
return $link;
}
function fwrite_stream($fp, $string) {
for ($written = 0; $written < strlen($string); $written += $fwrite) {
$fwrite = fwrite($fp, substr($string, $written));
if ($fwrite === false) {
return $written;
}
}
return $written;
}
function format_date($dt){
// 2010-08-08 03:34:00
// 03:34:00 08-Aug-2010
list($part1,$part2)=explode(" ",$dt);
list($yr,$mn,$da) = explode("-",$part1);
switch ($mn) {
case 1:
$x="Jan";
break;
case 2:
$x="Feb";
break;
case 3:
$x="Mar";
break;
case 4:
$x="Apr";
break;
case 5:
$x="May";
break;
case 6:
$x="Jun";
break;
case 7:
$x="Jul";
break;
case 8:
$x="Aug";
break;
case 9:
$x="Sep";
break;
case 10:
$x="Oct";
break;
case 11:
$x="Nov";
break;
case 12:
$x="Dec";
break;
default:
$x="Aou";
break;
}
$dt = $part2." hrs on ".$da."-".$x."-".$yr;
return $dt;
}
function getCompassDirection($bearing) {
$tmp = round(($bearing) / 22.5);
// echo $tmp."<BR>";
switch($tmp) {
case 1:
$direction = "NNE";
break;
case 2:
$direction = "NE";
break;
case 3:
$direction = "ENE";
break;
case 4:
$direction = "E";
break;
case 5:
$direction = "ESE";
break;
case 6:
$direction = "SE";
break;
case 7:
$direction = "SSE";
break;
case 8:
$direction = "S";
break;
case 9:
$direction = "SSW";
break;
case 10:
$direction = "SW";
break;
case 11:
$direction = "WSW";
break;
case 12:
$direction = "W";
break;
case 13:
$direction = "WNW";
break;
case 14:
$direction = "NW";
break;
case 15:
$direction = "NNW";
break;
default:
$direction = "N";
}
return $direction;
}
function getDistance($latitude1, $longitude1, $latitude2, $longitude2) {
global $distmulti;
$earth_radius = 6371;
$dLat = deg2rad($latitude2 - $latitude1);
$dLon = deg2rad($longitude2 - $longitude1);
$a = sin($dLat/2) * sin($dLat/2) + cos(deg2rad($latitude1)) * cos(deg2rad($latitude2)) * sin($dLon/2) * sin($dLon/2);
$c = 2 * asin(sqrt($a));
$d = $earth_radius * $c;
return ($d*$distmulti);
}
function snapon ($slat, $slong) {
global $db_db;
$sql = "select `name`, `lat`, `long`, `dist`, `description` FROM `$db_db`.`snapon` WHERE `active`=1";
$result = mysql_query($sql);
// echo $result;
if (!$result) {
die('Err:' . mysql_error());
}
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
$snaplat=$row[1];
$snaplong=$row[2];
$snapdist =$row[3];
$xdist= getDistance($slat, $slong, $snaplat, $snaplong);
if (($xdist*1000) < $snapdist) {
// echo "1".$row[0]."<br>";
// echo "1";
$ylat=$snaplat;
$ylong=$snaplong;
$xdesc="Snapon: ".$row[4];
$xbreak=1;
}
else {
// echo "Dist:".($xdist*1000)."<BR>";
// echo "0<BR>";
$ylat=$slat;
$ylong=$slong;
$xdesc="";
$xbreak=0;
}
// snapon record found, go back
if($xbreak) {
break;
}
}
return compact('ylat','ylong','xdesc');
}
?>
<html>
<?
echo $xtitle;
?>
<script type="text/javascript" src="addStyleSheet.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAC17oXuosJmDmIjaU-P3glhTvjyIlT149R8bptwp90Wkde4eP-hQfFlHm2oCf_zrfCN30h0mlBLQpIQ" type="text/javascript"></script>
<div id="map" style="width: <? echo $xwidth; ?>px; height: <? echo $xheight; ?>px"></div>
<td width = 150 valign="top" style="text-decoration: none; color: #4444ff;">
<div class="label" id="side_bar"></div>
</td>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// Display the map, with some controls and set the initial location
var Icon = new GIcon(G_DEFAULT_ICON);
Icon.image = "images/marker<? echo $device; ?>.png";
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),0);
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
// function createMarker(point,name,html) {
// var marker = new GMarker(point);
// GEvent.addListener(marker, "click", function() {
// marker.openInfoWindowHtml(html);
// });
// gmarkers[i] = marker;
// gmarkers[i].label = name;
// i++;
// return marker;
// }
var degreesPerRadian = 180.0 / Math.PI;
var radiansPerDegree = Math.PI / 180.0;
// Returns the bearing in degrees between two points.
// North = 0, East = 90, South = 180, West = 270.
function bearing( from, to ) {
// See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
// Convert to radians.
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 )
angle += Math.PI * 2.0;
// And convert result to degrees.
angle = angle * degreesPerRadian;
angle = angle.toFixed(1);
return angle;
}
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point,Icon);
// var myicon = new GIcon(G_DEFAULT_ICON);
// myicon.sprite = {image:"images/marker99.png", top:34*SpriteNum};
// var marker = new GMarker(point, {icon:myicon});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// Switch icon on marker mouseover and mouseout
GEvent.addListener(marker, "mouseover", function() {
marker.setImage("images/blank.png");
});
GEvent.addListener(marker, "mouseout", function() {
marker.setImage("images/marker<? echo $device; ?>.png");
});
marker.tooltip = '<div class="tooltip">'+name+'<\/div>';
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
gmarkers[i].label = name;
if (i%3) {
x = ' ';
} else {
x = '<br>';
}
// add a line to the side_bar html
side_bar_html += '(<a style="text-decoration: none;" href="javascript:myclick(' + i + ')">' + name + '<\/a>)' + x;
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// ===== Start with an empty GLatLngBounds object =====
var bounds = new GLatLngBounds();
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var label = markers[i].getAttribute("label");
var icon = "images/marker99.png";
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
bounds.extend(point);
}
// ================================================
var info_html="Straight line distances<br>";
for (var i = 0; i<markers.length; i++) {
for (var j=0; j<markers.length; j++) {
if (i != j) {
var d=gmarkers[i].getPoint().distanceFrom(gmarkers[j].getPoint())/1000;
var label = markers[i].getAttribute("label");
var htm = "<b>From "+gmarkers[i].label+ " To "+gmarkers[j].label;
htm += "<\/b> "+ d.toFixed(5) +" kilometres ";
htm += " Bearing: "+bearing(gmarkers[i].getPoint(),gmarkers[j].getPoint())+" degrees<br>";
info_html += htm;
}
}
}
// put the assembled results into the info div
<? if ($showdistance==1){
echo 'document.getElementById("info").innerHTML = info_html;';
}
?>
// ========= Distance
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
// ========= Now process the polylines ===========
var lines = xmlDoc.documentElement.getElementsByTagName("line");
// read each line
for (var a = 0; a < lines.length; a++) {
// get any line attributes
var colour = lines[a].getAttribute("colour");
var width = parseFloat(lines[a].getAttribute("width"));
// read each point on that line
var points = lines[a].getElementsByTagName("point");
var pts = [];
for (var i = 0; i < points.length; i++) {
pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
parseFloat(points[i].getAttribute("lng")));
}
map.addOverlay(new GPolyline(pts,colour,width));
}
// ===== determine the zoom level from the bounds =====
map.setZoom(map.getBoundsZoomLevel(bounds));
// ===== determine the centre from the bounds ======
map.setCenter(bounds.getCenter());
}
}
request.send(null);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
</body>
</html>