Ogólnie jest postęp, poduczyłem się trochę JavaScript-u oraz PHP i SQL, no i udało mi się coś działającego sklecić.
Zgodnie z zamysłem mapka pobiera dynamicznie pozycję zapisaną w bazie danych. Odbywa się to za pomocą skryptu getcoords.php, który zwraca tekst JSON z danymi zapisanymi w bazie danych.
wygląda to mniej więcej tak:
Code:
[{"no":"1005","lat":"52.65311","long":"16.82034","date":"2015-07-09 23:09:48"},{"no":"1006","lat":"52.65313","long":"16.82035","date":"2015-07-09 23:09:49"}]
Jest to tablica w postaci dwóch (i więcej) elementów, z których każdy ma parametry:
"no" - unikalny numer naddawany automatycznie z inkrementacją w górę
"lat" - szerokość geograficzna
"long" - długość geograficzna
"date" - data utworzenia pozycji GPS przez zewnętrzne urządzenie
Strona jest dostępna pod adresem
http://mikandrzej.cba.pl/index.html?table=auto1
Jej surowy kod:
[syntax=javascript]<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Pierwsza strona</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>
</head>
<body onload="mapaStart()">
<script type="text/javascript">
var mapa;
var marker=[];
var latt;
var longt;
var lattold;
var longtold;
var lastnum=0;
var first = 1;
var obszar;
var table;
var poly = [];
var col = [];
function quer()
{
var xmlhttp = new XMLHttpRequest();
var url = "getcoord.php?fromno=" + lastnum;
if(document.getElementById("chkfromdate").checked)
url = url + "&fromdate=" + document.getElementById("fromdate").value;
url = url + "&table=" + table;
document.getElementById("addresss").innerHTML = url;
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var myArr = JSON.parse(xmlhttp.responseText);
for(x=0;x<myArr.length;x++)
{
var num = parseInt(myArr[x].no);
if (num>lastnum)
{
obslugaTablicy(myArr[x],x);
lastnum = num;
document.getElementById("test").innerHTML = lastnum;
}
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
setTimeout ("quer()",3000);
}
function obslugaTablicy(arr,x)
{
latt = arr.lat;
longt = arr.long;
if(latt !=0 && longt !=0 )
modyfikujMarker(0,{title: table, draggable: false});
}
function modyfikujMarker(numerMarkera,opcjeMarkera)
{
var paths=[];
paths[0] = new google.maps.LatLng(lattold,longtold);
opcjeMarkera.position = new google.maps.LatLng(latt,longt);
paths[1] = new google.maps.LatLng(latt,longt);
lattold = latt;
longtold = longt;
col[numerMarkera] = '#FF0000';
poly[numerMarkera] = new google.maps.Polyline({
path: paths,
map: mapa,
strokeColor: col[numerMarkera]
});
poly[numerMarkera].setMap(mapa);
if (marker[numerMarkera] == null)
{
opcjeMarkera.map = mapa;
marker[numerMarkera] = new google.maps.Marker(opcjeMarkera);
}
else
marker[numerMarkera].setPosition(opcjeMarkera.position);
if (first)
{
obszar = new google.maps.LatLngBounds()
first = 0;
}
if(first || (!document.getElementById("chkzoom").checked && document.getElementById("chkzoom1").checked))
{
obszar.extend(opcjeMarkera.position);
mapa.fitBounds(obszar);
}
else if(document.getElementById("chkzoom1").checked)
{
mapa.setCenter(opcjeMarkera.position);
}
}
function mapaStart()
{
table = getQueryVariable("table");
document.getElementById("test").innerHTML = table;
var wspolrzedne = new google.maps.LatLng(52.684399, 16.844485);
var opcjeMapy = {
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
quer();
}
function reset(){
poly[0].setMap(null);
delete mapa;
var wspolrzedne = new google.maps.LatLng(52.684399, 16.844485);
var opcjeMapy = {
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
delete marker;
latt=0;
longt=0;
lattold=0;
longtold=0;
lastnum=0;
first = 1;
//obszar;
poly = [];
col = []
}
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
</script>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>
<br />
<div id="test">
</div>
<div id="test2">
</div>
<div id="test3">
</div>
<div id="addresss">
</div>
<button onclick="reset()">reset</button>
<input type="checkbox" name="chkfromdate" id="chkfromdate" >Pokazuj od:<input type="date" name="fromdate" id="fromdate" value="2015-06-01">
<input type="checkbox" name="chkzoom1" id="chkzoom1" checked="true">Zoom<input type="checkbox" name="chkzoom" id="chkzoom" >Zoom na wskaźnik
<p id="info">
Oto pierwsza mapa, stworzona za pomocą Google Maps API v3
</p>
</body>
</html>[/syntax]
Sprawa wygląda następująco:
1) nie mogę poradzić sobie z czyszczeniem mapy z polyline-u kiedy np zmienie datę na dzisiaj, a część nagranej trasy jest z wczoraj
2) zoom jakoś udało mi się ogarnąć, żeby pokazywał albo zbliżenie na ostatnią pozycję, albo na całość trasy
3) w kodzie czasami są użyte tablice - to z tego względu, że szykuję to pod możliwość śledzenia kilku nadajników na raz
Pomóżcie ogarniający, bo ja już nie mam na to siły
Statystyki: Napisane przez mikandrzej — 10 lip 2015, o 11:58
]]>
Kolega ogarnia to JS? bo ja próbuje sobie najpierw okroić ten kod mapy, żeby wyświetlał tylko jeden znacznik, ale już w trakcie jego krojenia mi się mapa nie chce włączyć.