Szczegóły POI z notatnika

Do skorzystania z tej funkcjonalności niezbędne jest zaimplementowanie notatnika po stronie własnego serwera web.

Funkcja getUserPoiDetails(poiIds, callBack)

Przyjmowane parametry

poiIds - Identyfikatory POI z notatnika do pobrania,
callBack - Funkcja wywołana po pobraniu wyników z parametrami:
- returnStatus - Obiekt statusu odpowiedzi,
- response - Zwrócone szczegółowe dane POI.

W konfiguracji API należy zdefiniować ścieżkę, pod którą dostępne są szczegóły POI:


var cfg = {
  "paths" : {
    "privatePoisInfo" : {
      "url" : 'http://moj.host.pl/privatePoisInfo.php',
      "paramNames" : {
        "pois_array" : 'P[]'
      }
    }
  }
};

Następnie definiujemy funkcję, która obsłuży pobraną zawartość:


function userPoiDetailsFnc(retStatus, response) {
  if (!retStatus.failed) {
    //wyświetlimy punkty z notesu na mapie
    DoCelu.addPoisToUserLayer(response.userPois);
    DoCelu.showUserLayer();
    //Oprócz tego wypiszemy szczegóły pod mapą
    jQuery('#poiDetails')
      .show()
      .find('pre')
        .html(jQuery.dump(response, 0, "Szczegóły POI"));
  }
}

Uruchamiamy funkcjonalność:


DoCelu.getUserPoiDetails([123], userPoiDetailsFnc);

Powyższe wywołanie wykona żądanie AJAX'owe postaci:

http://moj.host.pl/privatePoisInfo.php?callback=jsonp1241526517120&P[]=123

Po stronie serwera należy obsłużyć powyższy request i zwrócić odpowiedź w formacie:


jsonp1241526517120({
//Liczba zwróconych POI
  "amount":1,
//Tablica obiektów POI z notesu użytkownika
  "userPois":[
    {
      "poiId":123,
      "label":"A",
      "name":"Sklep spożywczy Małgosia",
      "description":"Sklep spożywczy",
      "poiGeom":{
        "lon":20.123,
        "lat":50.345
      }
    }
  ]
});

jsonp1241526517120 to nazwa wywoływanej funkcji javascriptowej przekazywana w URL'u jako parametr callback. Funkcja przyjmuje jeden parametr z obiektem, który zostanie udostępniony do funkcji userPoiDetailsFnc jako parametr response. Parametr zapisany jest w notacji JSON.

Przykładowy kod i efekt jego zastosowania:


<div id="map" style="width:800px; height:600px; "></div>
<script type="text/javascript">
//<![CDATA[
	jQuery(document).ready(function() {
		var cfg = {
			"paths" : {
				"privatePoisInfo" : {
					"url" : '/privatePoisInfo.mock.json',
					"paramNames" : {
						"pois_array" : 'P[]'
					}
				}
			}
		};
		function userPoiDetailsFnc(retStatus, response) {
			if (!retStatus.failed) {
				//wyświetlimy punkty z notesu na mapie
				DoCelu.addPoisToUserLayer(response.userPois);
				DoCelu.showUserLayer();
				//Oprócz tego wypiszemy szczegóły pod mapą
				jQuery('#poiDetails')
				.show()
				.find('code')
				.html(jQuery.dump(response, 0, "Szczegóły POI"))
				.chili();
			}
		}

		DoCelu.loadMap(document.getElementById('map'), cfg);
		jQuery('#test').mousedown(function() {
			DoCelu.getUserPoiDetails([123], userPoiDetailsFnc);
		});
	});
//]]>
</script>

Wypróbujmy zatem działanie w praktyce:

Ten dokument nie wyjaśnia wszystkich wątpliwości? Szczegółowa dokumentacja techniczna API DoCelu.pl

Sprawdź toczące się dyskusje na Forum API DoCelu.pl