Wyświetlanie layerka informacji o POI

Przy prezentacji POI na mapie, po wskazaniu go kursorem myszki zostaje pokazany layerek z opisem POI'a. Oprócz tego, z poziomu javascriptu, istnieje możliwość wyświetlania layerka dla określonego POI'a, chowania go, ale także przechwytywania informacji o wskazaniu POI'a myszą oraz o opuszczeniu kursora myszy z POI'a.

Funkcja showSearchedPoiLabel(poiId[, poiBase])

Pokazuje layerek dla POI o określonym id z określonej bazy POI. Jeśli wcześniej był wyświetlony layerek dla innego POI, to zostanie schowany.

Przyjmowane parametry

poiId - Identyfikator POI'a,
poiBase - Nazwa bazy POI. Domyślnie przyjmuje wartość docelu.

Funkcja hidePoiLabel()

Ukrywa layerek dla POI.

Przechwytywanie zdarzeń o wskazaniu POI kursorem myszy

Może zostać zdefiniowana funkcja callBack, która powiadomi nas o wskazaniu POI'a kursorem myszy. W tym momencie może zostać zsynchronizowana mapa z html'em i na przykład może zostać wyróżniony aktualnie wskazywany POI na liście wyszukanych.

Na przykładzie wyszukamy banki w Gdańsku po załadowaniu mapy i wyświetlimy listę wyszukanych POI. Zdefiniujemy także operacje wskazywania POI myszą na liście i na mapie.

Najpierw zdefiniujemy funkcję callBack, która utworzy listę POI z wyników wyszukiwania i podepnie odpowiednie zdarzenia.


//globalna tablica z wyszukanymi POI
var poisArray = [];

function searchPoiCallBack(ret, response) {
  $poisDiv = jQuery('#poisDiv').html('');
  $poisList = jQuery(document.createElement('ol')).appendTo($poisDiv);
  if (!ret.failed) {
    for (var i in response.pois) {
      var poi = response.pois[i];
      //wpisujemy dane o POI do naszej tablicy globalnej
      poisArray[poi.poiId] = poi;
      //tworzymy nowy element listy
      jQuery(document.createElement('li'))
        //id elementu li - będziemy po nim wyszukiwać elementu w drzewie DOM
        .attr('id', 'searched-poi-' + poi.poiId)
        //wyświetlana nazwa na liście
        .html(poi.name)
        //element dołączamy do listy
        .appendTo($poisList)
        //tworzę nowe zdarzenie - podświetl element na liście
        .bind('addHighlight', function() {
          //wytłuszczam czcionkę
          jQuery(this).css('font-weight', 'bold');
        })
        //tworzę nowe zdarzenie - usuń podświetlenie
        .bind('removeHighlight', function() {
          //normalna czcionka
          jQuery(this).css('font-weight', 'normal');
        })
        //przy wskazaniu elementu na liście wyświetli się dymek dla POI
        //wywołuję także zdarzenie podświetlenia elementu
        .mouseover(function() {
          //wyciągam z id elementu listy id POIa
          var poiId = jQuery.parseInt(jQuery(this).attr('id').replace(/searched-poi-/,''));
          //wyświetlam dymek na mapie dla POI o danym id
          DoCelu.showSearchedPoiLabel(poiId, poisArray[poiId].poiBase);
          jQuery(this).trigger('addHighlight');
        })
        //przy opusczeniu przez kursor elementu na liście schowa się dymek dla POI
        //usuwam także podświetlenie elementu
        .mouseout(function() {
          DoCelu.hidePoiLabel();
          jQuery(this).trigger('removeHighlight');
        });
    }
  }
}

W powyższym przykładzie zauważyliście pewnie zbindowane funkcje addHighlight i removeHighlight. Oprócz wywołania ich przy najechaniu kursorem myszy na element listy, będziemy je wywoływać także przy najechaniu kursorem na POI na mapie. Zdefiniujemy następujące funkcje callBack przyjmujące jeden parametr o strukturze:


var poi = {
  //identyfikator poi
  "poiId" : 1,
  //baza poi
  "poiBase" : "docelu"
}


function addHighlight(poi) {
  jQuery('#searched-poi-' + poi.poiId).trigger('addHighlight');
}
function removeHighlight(poi) {
  jQuery('#searched-poi-' + poi.poiId).trigger('removeHighlight');
}

Następnie dodamy powyższe funkcje do obiektu konfiguracyjnego i osadzimy mapę na stronie.


var config = {
  "callBacks" : {
    "addHighlightToSearchedPoi" : addHighlight,
    "removeHighlightFromSearchedPoi" : removeHighlight,
    "searchPoiByAddress" : searchPoiCallBack
  }
};

DoCelu.loadMap(document.getElementById('map'), config, function() {
  DoCelu.searchPoiByAddress("Gdańsk", null, null, "Bank", null, 0, 5);
});

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() {
	  //globalna tablica z wyszukanymi POI
	  var poisArray = [];

	  function searchPoiCallBack(ret, response) {
		$poisDiv = jQuery('#poisDiv').html('');
		$poisList = jQuery(document.createElement('ol')).appendTo($poisDiv);
		if (!ret.failed) {
		  for (var i in response.pois) {
			var poi = response.pois[i];
			//wpisujemy dane o POI do naszej tablicy globalnej
			poisArray[poi.poiId] = poi;
			//tworzymy nowy element listy
			jQuery(document.createElement('li'))
			  //id elementu li - będziemy po nim wyszukiwać elementu w drzewie DOM
			  .attr('id', 'searched-poi-' + poi.poiId)
			  //wyświetlana nazwa na liście
			  .html(poi.name)
			  //element dołączamy do listy
			  .appendTo($poisList)
			  //tworzę nowe zdarzenie - podświetl element na liście
			  .bind('addHighlight', function() {
				//wytłuszczam czcionkę
				jQuery(this).css('font-weight', 'bold');
			  })
			  //tworzę nowe zdarzenie - usuń podświetlenie
			  .bind('removeHighlight', function() {
				//normalna czcionka
				jQuery(this).css('font-weight', 'normal');
			  })
			  //przy wskazaniu elementu na liście wyświetli się dymek dla POI
			  //wywołuję także zdarzenie podświetlenia elementu
			  .mouseover(function() {
				//wyciągam z id elementu listy id POIa
				var poiId = jQuery.parseInt(jQuery(this).attr('id').replace(/searched-poi-/,''));
				//wyświetlam dymek na mapie dla POI o danym id
				DoCelu.showSearchedPoiLabel(poiId, poisArray[poiId].poiBase);
				jQuery(this).trigger('addHighlight');
			  })
			  //przy opusczeniu przez kursor elementu na liście schowa się dymek dla POI
			  //usuwam także podświetlenie elementu
			  .mouseout(function() {
				DoCelu.hidePoiLabel();
				jQuery(this).trigger('removeHighlight');
			  })
		  }
		}
	  }

	  function addHighlight(poi) {
		jQuery('#searched-poi-' + poi.poiId).trigger('addHighlight');
	  }
	  function removeHighlight(poi) {
		jQuery('#searched-poi-' + poi.poiId).trigger('removeHighlight');
	  }

	  var config = {
		"callBacks" : {
		  "addHighlightToSearchedPoi" : addHighlight,
		  "removeHighlightFromSearchedPoi" : removeHighlight,
		  "searchPoiByAddress" : searchPoiCallBack
		}
	  };

	  DoCelu.loadMap(document.getElementById('map'), config, function() {
		DoCelu.searchPoiByAddress("Gdańsk", null, null, "Bank", null, 0, 5);
	  });

	});
//]]>
</script>

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

Opinie (0)

Masz pomysł? Uwagi? Napisz do nas!

Nick

Twoja opinia

Pozostało znaków: 4000

[Pokaż regulamin]

REGULAMIN

Ten materiał nie ma jeszcze żadnej opinii. Twoja może być pierwsza!

Nawigacja w telefonie GSM:

Źródło danych:

Mapy:

Integracja i technologia: