Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Google maps i odświerzanie markerów
Forum PHP.pl > Forum > XML, AJAX
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:
  1. function markery()
  2. {
  3. $.ajax({
  4. url: "skrypt_odczytujacy_xml",
  5. method: "POST",
  6. dataType: "JSON",
  7. success: function(obj)
  8. {
  9. // tu robisz operacje nanoszące markery na mapę
  10. }
  11. });
  12.  
  13. }
  14.  
  15. $(document).ready(function()
  16. {
  17. setInterval(markery,2000); // wywołanie funkcji markery co 2 minuty.
  18.  
  19. });
  20. </script>
kubw19
A mógłbyś to wkleić jakoś do mojego kodu?


  1. <script type="text/javascript">
  2. <!--
  3. var mapa;
  4. var dymek;
  5.  
  6. function mapaStart()
  7. {
  8. var wspolrzedne = new google.maps.LatLng(50.4716820, 19.0718579);
  9. var opcjeMapy = {
  10. zoom: 4,
  11. center: wspolrzedne,
  12. mapTypeId: google.maps.MapTypeId.ROADMAP,
  13. disableDefaultUI: false
  14. };
  15. mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
  16. dymek = new google.maps.InfoWindow();
  17.  
  18.  
  19.  
  20. }
  21.  
  22. function wczytajMarkery()
  23. {
  24. jx.load('dane.php', function(xml)
  25. {
  26. var markery = xml.getElementsByTagName("marker");
  27. for(var i=0; i<markery.length; i++)
  28. {
  29. var lat = parseFloat(markery[i].attributes.getNamedItem("LAT").nodeValue);
  30. var lon = parseFloat(markery[i].attributes.getNamedItem("LNG").nodeValue);
  31. var ikona_url = markery[i].attributes.getNamedItem("FLAG").nodeValue;
  32. var nazwa = markery[i].attributes.getNamedItem("NAME").nodeValue;
  33. var marker = dodajMarker(lat,lon,ikona_url,nazwa);
  34. }
  35.  
  36. alert('Aktualnie mamy '+markery.length+' markery');
  37. },'xml','get');
  38. }
  39.  
  40. function dodajMarker(lat,lon,ikona_url,nazwa)
  41. {
  42. var rozmiar = new google.maps.Size(50,43);
  43. var punkt_startowy = new google.maps.Point(0,0);
  44. var punkt_zaczepienia = new google.maps.Point(15,12);
  45.  
  46. var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia);
  47.  
  48. var marker = new google.maps.Marker(
  49. {
  50. position: new google.maps.LatLng(lat,lon),
  51. title: nazwa,
  52. icon: ikona,
  53. map: mapa
  54. }
  55. );
  56. marker.txt = 'Latitude:<br /><strong>'+lat+'</strong>';
  57.  
  58. google.maps.event.addListener(marker,"click",function()
  59. {
  60. dymek.setPosition(marker.getPosition());
  61. dymek.setContent(marker.txt);
  62. dymek.open(mapa);
  63. });
  64. return marker;
  65.  
  66. }
  67.  
  68.  
  69. -->
  70. </script>
k_@_m_i_l
Pisane na szybko, ale działa:
  1. <script type="text/javascript">
  2. function dodajMarker(lat,lon,ikona_url,nazwa)
  3. {
  4. var rozmiar = new google.maps.Size(50,43);
  5. var punkt_startowy = new google.maps.Point(0,0);
  6. var punkt_zaczepienia = new google.maps.Point(15,12);
  7.  
  8. var ikona = new google.maps.MarkerImage(ikona_url, rozmiar, punkt_startowy, punkt_zaczepienia);
  9.  
  10. var marker = new google.maps.Marker(
  11. {
  12. position: new google.maps.LatLng(lat,lon),
  13. title: nazwa,
  14. icon: ikona,
  15. map: mapa
  16. });
  17. marker.txt = 'Latitude:<br /><strong>'+lat+'</strong>';
  18.  
  19. google.maps.event.addListener(marker,"click",function()
  20. {
  21. dymek.setPosition(marker.getPosition());
  22. dymek.setContent(marker.txt);
  23. dymek.open(mapa);
  24. });
  25. return marker;
  26. }
  27.  
  28. function wczytajMarkery(markery_arr)
  29. {
  30. for(var i=0; i<markery_arr.length; i++)
  31. {
  32. // Wyczyszczenie markerów z mapy
  33. markery_arr[i].setMap(null);
  34. }
  35. // Wyczyszczenie tablicy z markerami
  36. markery_arr = new Array();
  37.  
  38. $.ajax(
  39. {
  40. url: "dane.php",
  41. method: "GET",
  42. dataType: "xml",
  43.  
  44. success: function(xml)
  45. {
  46.  
  47.  
  48.  
  49. var markery = xml.getElementsByTagName("marker");
  50. for(var i=0; i<markery.length; i++)
  51. {
  52. var lat = parseFloat(markery[i].attributes.getNamedItem("LAT").nodeValue);
  53. var lon = parseFloat(markery[i].attributes.getNamedItem("LNG").nodeValue);
  54. var ikona_url = markery[i].attributes.getNamedItem("FLAG").nodeValue;
  55. var nazwa = markery[i].attributes.getNamedItem("NAME").nodeValue;
  56. markery_arr.push(dodajMarker(lat,lon,ikona_url,nazwa));
  57. }
  58. alert('Aktualnie mamy '+markery_arr.length+' markery');
  59. }
  60. });
  61. return markery_arr;
  62. }
  63. $(document).ready(function()
  64. {
  65. var wspolrzedne = new google.maps.LatLng(50.4716820, 19.0718579);
  66. var opcjeMapy =
  67. {
  68. zoom: 4,
  69. center: wspolrzedne,
  70. mapTypeId: google.maps.MapTypeId.ROADMAP,
  71. disableDefaultUI: false
  72. };
  73. mapa = new google.maps.Map(document.getElementById("mapa"), opcjeMapy);
  74. dymek = new google.maps.InfoWindow();
  75. // Tablica zaierająca markery
  76. var markery_arr = new Array();
  77.  
  78. setInterval(function()
  79. {
  80. // Wywołanie funkcji wczytajMarkery() co dwie minuty
  81. markery_arr = wczytajMarkery(markery_arr);
  82. },120000);
  83. });
  84.  
  85.  
  86. </script>
kubw19
Dzięki wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.