Wyświetlanie layerka dla POI z notatnika

Funkcja showUserPoiLabel(poId)

Wyświetla layerek z opisem POI z notatnika.

Przyjmowane parametry:

poiId - Identyfikator POI'a.

Zdefiniujemy jeden taki POI i dodamy go do warstwy:


var userPoi = {
  "poiId":123,
  "label":"1",
  "name":"Punkt z notesu",
  "description":"Mój pierwszy punkt z Notesu",
  "poiGeom":{
	"lon":20.123,
	"lat":50.345
  }
};
DoCelu.addPoisToUserLayer([userPoi]);
DoCelu.showUserLayer();

Następnie wyświetlimy layerek z opisem:


DoCelu.showUserPoiLabel(123);

Funkcja hidePoiLabel()

Ukrywa layerek z opisem POI'a.

Aby ukryć wcześniej wyświetlony layerek wykonamy:


DoCelu.hidePoiLabel();

Synchronizacja HTML-Mapa

Możemy także przechwytywać zdarzenia najechania kursorem myszki na POI z notatnika. Zdefiniujemy w tym celu 2 funkcje callBackowe:


function addHighlightFnc(poiId) {
  jQuery('#upoi-' + poiId).html("Kursor wskazuje na punkt").css('font-weight', 'bold');
}
function removeHighlightFnc(poiId) {
  jQuery('#upoi-' + poiId).html("Kursor nie wskazuje punktu").css('font-weight', 'normal');
}
DoCelu.addCallback("addHighlightToUserPoi", addHighlightFnc);
DoCelu.addCallback("removeHighlightFromUserPoi", removeHighlightFnc);

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() {
		function addHighlightFnc(poiId) {
			jQuery('#upoi-' + poiId).html("Kursor wskazuje na punkt").css('font-weight', 'bold');
		}
		function removeHighlightFnc(poiId) {
			jQuery('#upoi-' + poiId).html("Kursor nie wskazuje punktu").css('font-weight', 'normal');
		}
		DoCelu.loadMap(document.getElementById('map'), null, function() {
			var userPoi = {
				"poiId":123,
				"label":"1",
				"name":"Punkt z notesu",
				"description":"Mój pierwszy punkt z Notesu",
				"poiGeom":{
					"lon":20.123,
					"lat":50.345
				}
			};
			DoCelu.addPoisToUserLayer([userPoi]);
			DoCelu.showUserLayer();
			DoCelu.addCallback("addHighlightToUserPoi", addHighlightFnc);
			DoCelu.addCallback("removeHighlightFromUserPoi", removeHighlightFnc);

		});
		jQuery('#test-show').mousedown(function() {
			DoCelu.showUserPoiLabel(123);
		});
		jQuery('#test-hide').mousedown(function() {
			DoCelu.hidePoiLabel();
		});
	});
//]]>
</script>

Wypróbujmy zatem działanie w praktyce:

Kursor nie wskazuje punktu

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