Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dane z json a google maps api
Forum PHP.pl > Forum > XML, AJAX
waldemi
Mam następujący problem:
na stronie mam formularza dodawania obserwacji (strona dla przyrodników) wraz z mapą Google. Szablon strony zrobiony jest w Smarty. Użytkownik dodaje swoją obserwację, na mapie zaznacza marker w odpowiednim miejscu, klika na Dodaj - wszystko zapisuje się poprawnie. W przypadku podania niepełnych danych kiedy marker już jest na mapie z poziomu PHP dodaję pozycję markera do GMApi poprzez
  1. $tpl -> assign ('d_dlgeo', $d_dlgeo);
  2. $tpl -> assign ('d_szgeo', $d_szgeo);

i to również działa bez zarzutu. Klient zażyczył sobie jednak żeby użytkownik miał możliwość wczytania miejsca ostaniej obserwacji w celu szybszego dodanai kolejnej. Realizuję to poprzez JQUERY i AJAX, potrzebne dane otrzymuję w formacie JSON i wyświetlam je w odpowienich polach formularza poprzez
  1. document.getElementById('nazwa').value = wyn.miejsce;

Nie wiem jednak jak współrzędne otrzymane w JSON dodać do GMApi i wyświetlić na mapie. Czy koś ma jakiś pomysł jak to rozwiązać? Jest to wogóle do zrobienia?
Arcioch
Tak jest to w ogóle do zrobienia smile.gif

Zmienne potrzebne do tworzenia mapy i markerów smile.gif

  1. var map;
  2. var gmarkers = [];
  3. var info_windows = [];

Pierwsza to oczywiście mapa. Druga to tablica z markerami a trzecia to okienko pokazywane przy klikaniu na marker.
Nie wiem jak masz kod do tworzenia markera ja mam na przykład taki:

  1. function createMarker(map, point, html) {
  2. var marker = new google.maps.Marker( {
  3. position: point,
  4. icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
  5. });
  6.  
  7. marker.info_window = new google.maps.InfoWindow({
  8. content: html
  9. });
  10.  
  11. google.maps.event.addListener(marker, 'click', function() { marker.info_window.open(map,marker); });
  12. gmarkers.push(marker);
  13.  
  14. }


Funkcje do ukrywania, czyszczenia, pokazywania markerów na mapie:

  1. function clearOverlays() {
  2. if (gmarkers) {
  3. for (i in gmarkers) {
  4. gmarkers[i].setMap(null);
  5. }
  6. }
  7. }
  8.  
  9. function showOverlays() {
  10. if (gmarkers) {
  11. for (i in gmarkers) {
  12. gmarkers[i].setMap(map);
  13. }
  14. }
  15. }
  16.  
  17. function deleteOverlays() {
  18. if (gmarkers) {
  19. for (i in gmarkers) {
  20. gmarkers[i].setMap(null);
  21. }
  22. gmarkers.length = 0;
  23. }
  24. }


No i teraz ajax

  1. $.ajax({
  2. type: "POST",
  3. url: 'jakis url'
  4. data: 'jakies dane',
  5. cache: false,
  6. dataType: "json",
  7. success: function(data){
  8.  
  9. $.each(data, function() {
  10. var point = new google.maps.LatLng(this['lat'], this['lang']);
  11. createMarker(map, point, this['desc']);
  12. });
  13.  
  14. showOverlays();
  15.  
  16. }
  17. });


JSONA wysyłam sobie w takiej formie :

  1. [{"desc":"tu jakis dymek","lat":"49.97649859519805","lang":"20.459437072276614"}]
waldemi
Dzięki, spróbuję to jakoś złożyć razem i uruchomić.
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.