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:
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.
Brak komentarzy:
Prześlij komentarz