![[Photo gallery]](/staff/tp/icons/ico_gallery.png){kind=icon}
W bibliotece,
z której korzystam
do wizualizowania plików GPX na google maps,
do wyświetlenia
punktu (czyli elementu wpt) wykorzystywana jest funkcja
GPXParser.prototype.CreateMarker:
![[Zdjęcie T. Przechlewskiego]](/personal/rysunki/home-icon.jpg){kind=icon}
GPXParser.prototype.CreateMarker = function(point)
{
var lon = parseFloat(point.getAttribute("lon"));
var lat = parseFloat(point.getAttribute("lat"));
// ... ... ...
var marker = new GMarker(new GLatLng(lat,lon));
// ... ... ...
}
W powyższym
symbol // ... ... ... oznacza pominięte fragmenty funkcji.
Wszystkie ikony
dla elementów wpt są oznaczone standardową dużą czerwoną pinezką.
Ja chcę, żeby moja pinezka ,,reagowała'' na obecność elementu
type, który według
schematu GXP, określa typ punktu.
Przykładowo miejsce odwiedzone będę oznaczał jako:
<wpt lat="54.071729" lon="18.446817"><ele/> <name>Skarszewy</name> <type>visited</type> <extensions><html>Skarszewy</html></extensions></wpt>
Tak oznaczone miejsca mają być wyróżniane za pomocą niebieskiej ikony. Pozostałe będą oznaczane czerwoną:
GPXParser.prototype.CreateMarker = function(point)
{
var lon = parseFloat(point.getAttribute("lon"));
var lat = parseFloat(point.getAttribute("lat"));
var wpType = point.getElementsByTagName("type")[0] ; // czy istnieje element type?
var wpTypeTxt = "?";
if ( wpType ) { wpTypeTxt = wpType.firstChild.nodeValue; } // jeżeli tak przypisz wartość
// ... ... ...
// zmiana wyglądu, skopiowane z: http://kody.wig.pl/tag/gmarker/
var cIcon = new GIcon();
// Ikony do pobrania z http://sites.google.com/site/gmapicons/
// umieszczam w katalogu '/icons_/'
if ( wpTypeTxt == "visited" ) { cIcon.image = '/icons_/mm_20_blue.png'; }
else { cIcon.image = '/icons_/mm_20_red.png'; }
cIcon.shadow = "/icons_/mm_20_shadow.png";
var marker = new GMarker(new GLatLng(lat,lon), cIcon );
cIcon.iconSize = new GSize(12, 20);
cIcon.shadowSize = new GSize(22, 20);
cIcon.iconAnchor = new GPoint(6, 20);
cIcon.infoWindowAnchor = new GPoint(5, 1);
// ... ... ...
}
Wynik można obejrzeć tutaj.