ugrás a tartalomhoz

google maps marker mozgatása fájlból vett koordináta alapján

grais · 2008. Május. 25. (V), 21.51
Sziasztok. Van egy olyan problémám, hogy nem tudok rájönni, hogyan tudok az oldal teljes ujratöltése nélkül az első letöltéskor betöltött google maps-on egy jelolőt mozgatni.

Valami ilyesmit szeretnék: http://www.n2yo.com/?s=28474

Az oldalt látható frissülő koordináták itt nem úgy működnek ahogy nekem mivel az én esetemben egy GPS eszköz paraméterez fel egy php filet, ami ennek hatására létrehoz egy a legutolsó koordinátákat tartalmazó filet (ez akármilyen szerkezetü lehet ebból kifolyólag... erre a későbbiek miatt van nagy szükség). Ezt sikerült kilesnem, hogy AJAX-al meg legyen oldva. A koordináták ennek köszönhetően folyamatosan frissulnek, látszólag ugyan úgy ahogy a http://www.n2yo.com/?s=28474 -oldalon.

Akit érdekel itt a kód hogy én is segitsek valamit:

Az adatfileom tartalma (adat.csv)amit a php generál a GPS adatok alapján:

19.040745,47.498403,34.0,30.3,234.5,20070529,123445.234,seee,ARRR3ER */

Azon file tartalma ami kiolvassa és egy tombe helyezi a GPS adatait az adat.csv filebol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<?php $fm = fopen("adat.csv", "r");
$adatertekek_tombje = fgetcsv($fm, 1000, ","); ?>
<?php
echo "<p>Legutóbbi Deódolt adatok:</p>
<p>Langitude:" . $adatertekek_tombje[1] . "</p>
<p>Longitude:" . $adatertekek_tombje[0] . "</p>
<p>Altitude:" . $adatertekek_tombje[2] . "</p>
<p>Sebesség:" . $adatertekek_tombje[3] . "</p>
<p>Heading:" . $adatertekek_tombje[4] . "</p>
<p>Dátum:" . $adatertekek_tombje[5] . " </p>
<p>Idő:" . $adatertekek_tombje[6] . " </p>
<p>Felhasználó:" . $adatertekek_tombje[7] . " </p>
<p>Azonosító:" . $adatertekek_tombje[8];
?>
</body>
</html>


És ime amivel megszenvedtem. Maga az oldal ami azonnal frissül, ha a GPS uj adatokat küld a feldolgozó php-nak ami ugye az adat.csv filet hozza létre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<title>Untitled Document</title>
</head>

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

new Ajax.PeriodicalUpdater('target', '/adat.php', {
method: 'get', frequency: 1, decay: 1
});

// ]]>
</script>
<div id="HttpClientStatus" style="display:none">Loading ...</div>
<div id="target"></div>
<body>
</body>
</html>


Egy kis odafigyeléssel bármilyen oldalon létrehozott target nevu DIV elemébe behozható a GPS koordináták sokasága .-) .

Természetesen létrehoztam egy google mappot is ami bár kiolvassa és megjeleniti a GPS altal megjelenitett utolsó koordinátát sajnos azonban mindíg manuálisan kell egy lapujratöltést nyomni a böngészőben, ha kiváncsi vagyok a legfrissebb eredményekre.

Aki tud az kérem segitsen, hogy az a kis jelolő is folyamatosan mozogjon a google térképen lapujratöltés nélkül.
‹ PHP tanulása PHP login rendszer ›
 ■
1

google maps marker mozgatása fájlból vett koordináta alapjá

dragi · 2008. Május. 25. (V), 22.32
A google maps apiban van Ajax api agyazva. Azzal elkered az ujabb koordinatakat majd GlatLng-vel pointot csinalsz belole es atadod a panTo() fugvenynek. Ennek hatasara szepen odacsuszik a map a megadott koordinatara. Ha kilog a kepernyorol akkor pedig odaugrik.
2

Köszi

grais · 2008. Május. 26. (H), 18.01
Viszont sajna nem túl sokat értek hozzá, hiába vettem AJAX alapjai könyvet.. Szerintem csak a szerző érti miről beszél benne meg aki már vágja az AJAX-ot. Sóval próbálkozom azzal amit mondtál,de ha esetleg tudsz példát akkor megkoszönném. én ki is teszem ide a gorrást, vagy te is megoszthatnád velünk, ha van ilyened, úgyis rengetegen keresnek ilyen megoldást. Előre is köszönöm.
3

Map pelda

dragi · 2008. Május. 27. (K), 09.33
Ez a kód adatbazisból kéri el a koordinatakat (vagy csak az utolsót, vagy ez egész útvonalat).
Tud követős módon utvonalat rajzolni, tehát hogy a mapon rajzolodik a csík és a map mozog vele, illetve tud úgy rajzolni, hogy kirajzolja az útvonalat és a végére ugrik. Illetve tud aktuális pozicót kérni. A cabriolet.png egy kis auto ikonja (a default helyett).
A getkoords.php végzi az adatbázis műveleteket és JSON-ban adja vissza a koordianatakat.

<!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"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=IDEJONATEKULCSOD&hl=hu" type="text/javascript"></script>
<script type="text/javascript">

var map;
var toggleState = 1;
var koordinates = new Array();
var i = 0;
var marker = new GMarker(0);

Object.prototype.isArray = function() {
   return this.constructor == Array;
}

function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(47.195181, 18.451695), 13);
	}
	getcurrentpos();
}

function gotothere()
{	
	var request = GXmlHttp.create();
	
	var rendszam = document.getElementById('rendszam').value;
	var datum = document.getElementById('datum').value;
	
	var get_str = 'getkord.php?rendszam='+rendszam+'&datum='+datum;
	
	request.open("GET", get_str, true);
    request.onreadystatechange = function() {
    switch(request.readyState) {
     
     case 0:
    	document.getElementById('log').innerHTML="Sending request..."; 
     break;
     
     case 1:
    	document.getElementById('log').innerHTML="Loading response...";
    	document.body.style.cursor = 'wait'; 
     break;
     
     case 2:
    	document.getElementById('log').innerHTML="Response loaded..."; 
     break;
     
     case 3:
    	document.getElementById('log').innerHTML="Response ready..."; 
    	document.body.style.cursor = 'default';
     break;	
    		
     case 4:	
    	var rjson = eval( "(" + request.responseText + ")" );
       	
    	var point = new GLatLng(rjson.koords[0].szadat, rjson.koords[0].hadat); 
        map.panTo(point);
        var Icon = new GIcon(G_DEFAULT_ICON);
		Icon.image = "image/PNG/256x256/Cabriolet.png";
		Icon.shadow = "";
		markerOptions = { icon:Icon };
		marker = new GMarker(point, markerOptions);
		map.addOverlay(marker);
		marker.openInfoWindowHtml("rogzido: "+rjson.koords[0].rogz_ido+" <br>mido: "+rjson.koords[0].mido);
		      
	 break;
    }
  }
  
  request.send(null);
}

function semmi()
{
	
	document.getElementById('log').innerHTML="Done...";
}

function drawline()
{
	var polyline = new GPolyline([
    			new GLatLng(koordinates.koords[i].szadat,koordinates.koords[i].hadat),
    			new GLatLng(koordinates.koords[i+1].szadat,koordinates.koords[i+1].hadat)],    			
    			"#0000FF",3);    		
    			map.addOverlay(polyline);
    			
    		if ((i%5) == 0 || i == 0) {
    			if (marker.getPoint()) {
    				marker.hide();
    				map.removeOverlay(marker);
    			}
    			var point = new GLatLng(koordinates.koords[i].szadat, koordinates.koords[i].hadat); 
        		var Icon = new GIcon(G_DEFAULT_ICON);
				Icon.image = "image/PNG/256x256/Cabriolet.png";
				Icon.shadow = "";
				markerOptions = { icon:Icon };
				marker = new GMarker(point, markerOptions);
				map.addOverlay(marker);	
    			map.panTo(point);
    		}	
				document.getElementById('log').innerHTML="rogz_ido: "+koordinates.koords[i].rogz_ido+" mido: "+koordinates.koords[i].mido;
			
				if (koordinates.koords[i+1]) {
    				i++;
    				setTimeout("drawline()",500);
    			} else {   				
    				i = 0;
    				document.getElementById('log').innerHTML="DONE...";
    			}
}

function drawpoly()
{
	document.getElementById('log').innerHTML="Utvonal rajzolasa";
	var polyline = new GPolyline([
    			new GLatLng(koordinates.koords[i].szadat,koordinates.koords[i].hadat),
    			new GLatLng(koordinates.koords[i+1].szadat,koordinates.koords[i+1].hadat)],    			
    			"#0000FF",3);    		
    			map.addOverlay(polyline);
	 							
	
	if (koordinates.koords[i+1].szadat) {
    	i++;
    	setTimeout("drawpoly()",100);
    } else {   				
    	i = 0;
    	document.getElementById('log').innerHTML="DONE...";
    }    	
}

function getkoords()
{
	var request = GXmlHttp.create();
	
	var rendszam = document.getElementById('rendszam').value;
	var datum = document.getElementById('datum').value;
	
	var get_str = 'getkord.php?t=1&rendszam='+rendszam+'&datum='+datum;
		
	request.open("GET", get_str, true);
    request.onreadystatechange = function() {
    switch(request.readyState) {
     
     case 0:
    	document.getElementById('log').innerHTML="Sending request..."; 
     break;
     
     case 1:
    	document.getElementById('log').innerHTML="Loading response...";
    	document.body.style.cursor = 'wait'; 
     break;
     
     case 2:
    	document.getElementById('log').innerHTML="Response loaded..."; 
     break;
     
     case 3:
    	document.getElementById('log').innerHTML="Response ready..."; 
    	document.getElementById('log').innerHTML="Koordinatak letoltve"; 
    	document.body.style.cursor = 'default';
     break;	
    		
     case 4:		
    	var rjson = eval( "(" + request.responseText + ")" );
    	map.clearOverlays();    	
		koordinates = rjson;
		i = 0;		
		
     break;
    }     
  }
  request.send(null);     		
}

function carroute()
{	
	i = 0;
	drawline();
}

function getcurrentpos()
{	
	if ((document.getElementById("rendszam").value != "rendszam") &&
 (document.getElementById("rendszam").value.length >0) && 
document.getElementById("getcurrent").checked == true) {
		gotothere();
	}
	setTimeout("getcurrentpos()",6000);
	
}
</script>

</head>
<body onload="load();" onunload="GUnload();">
	<div id="map" style="width: 960px; height: 500px;border 1px solid green"></div>
	<br clear="all"/>
	<br/>
<div id="log" style="border: 1px solid black;"> </div>

<input id="rendszam" type="text" value="rendszam" onclick="this.value='';">
<input id="datum" type="text" value="datum" onclick="this.value='';">
<input type="button" value="getkoords" onclick="getkoords();">
<br>
<input type="button" value="kovetes" onclick="carroute();">
<input type="button" value="utvonal kirajzolasa" onclick="drawpoly();">
<input type="button" value="utolso pozicio" onclick="gotothere();">
<input type="checkbox" id="getcurrent"> automatikus utolso pozicio (6mp)
</body>
</html>
4

Mindenki nevében

grais · 2008. Május. 27. (K), 21.11
Nagyon köszönöm, a kódot. Most könyökig belevésem magamat aztán ha nagyon nem megy még kérdezek ha nem baj.
remélem sikerül egy moduláris szerkezetet létrehozni, hogy minden ilyen jellegü igényt ki tudjon elégíteni.
Addig is nagyon nagyon köszönöm.
5

getkord.php

grais · 2008. Jún. 1. (V), 12.14
ez a getkord.php, milyen változókad ad át??

kicsit átirtam hogy a fugvény hivásakor egy kis php részket vegye ki a koordinátákat + a nekem nem kellő dolgokat is kivettem.
ha jól néztem a load() gugvény hivásakor auto lefut a getcurrentpos() és gotohere() fugvény majd mivel nincs feltétel ez minden 6. mp-ben ismétlődik.

Valamiért azonba nem megy.. :-(




<!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"/>  
<title>Google Maps</title>  
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4M" type="text/javascript"></script>  
<script type="text/javascript">  
  
var map;  
var toggleState = 1;  
var koordinates = new Array();  
var i = 0;  
var marker = new GMarker(0);  
  
Object.prototype.isArray = function() {  
   return this.constructor == Array;  
}  
  
function load() {  
    if (GBrowserIsCompatible()) {  
        map = new GMap2(document.getElementById("map"));  
        map.addControl(new GSmallMapControl());  
        map.addControl(new GMapTypeControl());  
        map.setCenter(new GLatLng(47.4983506, 19.04044), 13);  
    }  
    getcurrentpos();  
}  
  
function gotothere()  
{     
    var request = GXmlHttp.create();  
    request.open("GET", getkord.php, true);  
    request.onreadystatechange = function() {  
    switch(request.readyState) {  
       
     case 0:  
        document.getElementById('log').innerHTML="Sending request...";   
     break;  
       
     case 1:  
        document.getElementById('log').innerHTML="Loading response...";  
        document.body.style.cursor = 'wait';   
     break;  
       
     case 2:  
        document.getElementById('log').innerHTML="Response loaded...";   
     break;  
       
     case 3:  
        document.getElementById('log').innerHTML="Response ready...";   
        document.body.style.cursor = 'default';  
     break;   
              
     case 4:      
        var rjson = eval( "(" + request.responseText + ")" );  
        


		  
        var point = new GLatLng(<?php 
										$fm = fopen("adathp.csv", "r");
										$adatertekek_tombje = fgetcsv($fm, 1000, ",");
										echo $adatertekek_tombje[1] . "," . $adatertekek_tombje[0];
								?>);   
        map.panTo(point);  
        var Icon = new GIcon(G_DEFAULT_ICON);  
        Icon.image = "img/11.png";  
        Icon.shadow = "";  
        markerOptions = { icon:Icon };  
        marker = new GMarker(point, markerOptions);  
        map.addOverlay(marker);  
 
                
     break;  
    }  
  }  
    
  request.send(null);  
}  
  
  
function getcurrentpos()  
{     
     gotothere();  
     setTimeout("getcurrentpos()",6000);  
      
}  
</script>  
  
</head>  
<body onload="load();" onunload="GUnload();">  
    <div id="map" style="width: 960px; height: 500px;border 1px solid green"></div>  
    <br clear="all"/>  
    <br/>  
<div id="log" style="border: 1px solid black;"> </div>  
</body>  
</html>
6

A JSON

grais · 2008. Aug. 19. (K), 14.22
Valami ijesmi a JSONO forma a mit a php visszaad??

Here we show the JSON object returned by the geocoder for the address of Google's headquarters:

{
  "name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [
    {
      "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
      "AddressDetails": {
        "Country": {
          "CountryNameCode": "US",
          "AdministrativeArea": {
            "AdministrativeAreaName": "CA",
            "SubAdministrativeArea": {
              "SubAdministrativeAreaName": "Santa Clara",
              "Locality": {
                "LocalityName": "Mountain View",
                "Thoroughfare": {
                  "ThoroughfareName": "1600 Amphitheatre Pkwy"
                },
                "PostalCode": {
                  "PostalCodeNumber": "94043"
                }
              }
            }
          }
        },
        "Accuracy": 8
      },
      "Point": {
        "coordinates": [-122.083739, 37.423021, 0]
      }
    }
  ]
}