Google maps i odświerzanie markerów Opcje

[kubw19]

Cześć. Zrobiłem mapkę, która pobiera dane z pliku xml, do którego dane są co 2 min aktualizowane. Żeby zobaczyć nowe położenie obiektów trzeba odświerzyć stronę, a wiem, że się da zrobić, aby odświerzały się same markery. Słyszałem, że da się to zrobić w AJAXIE, tylko niestety nie znam się na AJAXIE, a na javascript tylko troszeczkę. Pomoże ktoś, co wstawić w odpowiednim miejscu kodu mapy?

Pozdrawiam

[k_@_m_i_l]

http://api.jquery.com/jQuery.ajax/

W php, zrób sobie funkcję która przetworzy Ci ten xml i zwróci tablicę z markerami zakodowaną JSON-em.
W js robisz funkcję, która dopisuje Ci markery na mapę i ustaw ją aby się odpalała co 2 minuty.
Przykładowo:

[HTML] pobierz, plaintext 
 <script>
   function markery()
   {
        $.ajax({
           url: "skrypt_odczytujacy_xml", 
           method: "POST",
           dataType: "JSON",
           success: function(obj)
           {
                   // tu robisz operacje nanoszące markery na mapę
           }
        });
 
   }
 
   $(document).ready(function()
   {
         setInterval(markery,2000); // wywołanie funkcji markery co 2 minuty. 
 
   });
 </script>
[HTML] pobierz, plaintext 

[kubw19]

A mógłbyś to wkleić jakoś do mojego kodu?

[PHP] pobierz, plaintext 
<script type="text/javascript">   
		<!-- 
			var mapa; 	
			var dymek; 	
 
			function mapaStart()  
			{  
				var wspolrzedne = new google.maps.LatLng(50.4716820, 19.0718579);
				var opcjeMapy = {
					zoom: 4,
					center: wspolrzedne,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					disableDefaultUI: false
				};
				mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 			
				dymek = new google.maps.InfoWindow();
 
 
 
			}  
 
			function wczytajMarkery()
			{
				jx.load('dane.php', function(xml)
				{
					var markery = xml.getElementsByTagName("marker");
					for(var i=0; i<markery.length; i++)
					{
						var lat			=	parseFloat(markery[i].attributes.getNamedItem("LAT").nodeValue);
						var lon			=	parseFloat(markery[i].attributes.getNamedItem("LNG").nodeValue);
						var ikona_url	=	markery[i].attributes.getNamedItem("FLAG").nodeValue;
						var nazwa		=	markery[i].attributes.getNamedItem("NAME").nodeValue;
						var marker		=	dodajMarker(lat,lon,ikona_url,nazwa);
					}
 
					alert('Aktualnie mamy  '+markery.length+' markery');
				},'xml','get');
			}
 
			function dodajMarker(lat,lon,ikona_url,nazwa)
			{
                var rozmiar = new google.maps.Size(50,43);   
                var punkt_startowy = new google.maps.Point(0,0);   
                var punkt_zaczepienia = new google.maps.Point(15,12);   
 
                var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia); 
 
				var marker	=	new google.maps.Marker(
					{
						position: new google.maps.LatLng(lat,lon),
						title: nazwa,
						icon: ikona,
						map: mapa
					}
				);
				marker.txt	=	'Latitude:<br /><strong>'+lat+'</strong>';
 
				google.maps.event.addListener(marker,"click",function()
				{
					dymek.setPosition(marker.getPosition());
					dymek.setContent(marker.txt);
					dymek.open(mapa);
				});
				return marker;
 
			}
 
 
		-->
		</script>   
[PHP] pobierz, plaintext 

Ten post edytował kubw19 2.05.2012, 10:48:05

[k_@_m_i_l]

Pisane na szybko, ale działa:

[HTML] pobierz, plaintext 
<script type="text/javascript">
     function dodajMarker(lat,lon,ikona_url,nazwa)
     {
        var rozmiar = new google.maps.Size(50,43);
        var punkt_startowy = new google.maps.Point(0,0);
        var punkt_zaczepienia = new google.maps.Point(15,12);
 
        var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia);
 
        var marker = new google.maps.Marker(
        {
            position: new google.maps.LatLng(lat,lon),
            title: nazwa,
            icon: ikona,
            map: mapa
        });
        marker.txt = 'Latitude:<br /><strong>'+lat+'</strong>';
 
        google.maps.event.addListener(marker,"click",function()
        {
            dymek.setPosition(marker.getPosition());
            dymek.setContent(marker.txt);
            dymek.open(mapa);
        });
        return marker;
     }
 
     function wczytajMarkery(markery_arr)
     {
        for(var i=0; i<markery_arr.length; i++)
        {
            // Wyczyszczenie markerów z mapy 
            markery_arr[i].setMap(null);
        }
       // Wyczyszczenie tablicy z markerami 
        markery_arr = new Array();
 
        $.ajax(
        {
            url: "dane.php",
            method: "GET",
            dataType: "xml",
 
            success: function(xml)
            {
 
 
 
                var markery = xml.getElementsByTagName("marker");
                for(var i=0; i<markery.length; i++)
                {
                    var lat = parseFloat(markery[i].attributes.getNamedItem("LAT").nodeValue);
                    var lon = parseFloat(markery[i].attributes.getNamedItem("LNG").nodeValue);
                    var ikona_url = markery[i].attributes.getNamedItem("FLAG").nodeValue;
                    var nazwa = markery[i].attributes.getNamedItem("NAME").nodeValue;
                    markery_arr.push(dodajMarker(lat,lon,ikona_url,nazwa));
                }
                alert('Aktualnie mamy '+markery_arr.length+' markery');
            }
        });
        return markery_arr;
     }
     $(document).ready(function()
     {
        var wspolrzedne = new google.maps.LatLng(50.4716820, 19.0718579);
        var opcjeMapy = 
        {
            zoom: 4,
            center: wspolrzedne,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: false
        };
        mapa = new google.maps.Map(document.getElementById("mapa"), opcjeMapy);
        dymek = new google.maps.InfoWindow();
        // Tablica zaierająca markery 
        var markery_arr = new Array();
 
        setInterval(function()
        {
          // Wywołanie funkcji wczytajMarkery() co dwie minuty 
          markery_arr = wczytajMarkery(markery_arr);  
        },120000);
     });
 
 
    </script>
[HTML] pobierz, plaintext 

Ten post edytował k_@_m_i_l 2.05.2012, 15:30:26

[kubw19]

Dzięki