Zmiana domyślnej ikony znacznika
W ostatniej częsci kursu pokazano, jak łatwo dodać na mapę marker. Co więcej, marker może mieć dowolnie wybraną ikonę, spełniającą funkcję informacyjną o znaczeniu danego miejsca.
Oto przykład, demonstrujący sposób definiowania ikonki: przykład 1pokaż kod przykładu
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Przykład</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onload="mapaStart()">
<script type="text/javascript">
<!--
var mapa; // obiekt globalny
function dodajMarker(opcjeMarkera)
{
opcjeMarkera.map = mapa;
var marker = new google.maps.Marker(opcjeMarkera);
}
function mapaStart()
{
var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
// wspólne cechy ikon
var rozmiar = new google.maps.Size(32,32);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(16,16);
// ikonki
var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona2 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon23.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona3 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon13.png", rozmiar, punkt_startowy, punkt_zaczepienia);
dodajMarker({position: new google.maps.LatLng(53.4203,14.7011), title: 'Restauracja #1', icon: ikona1});
dodajMarker({position: new google.maps.LatLng(53.3902,14.7202), title: 'Restauracja #2', icon: ikona1});
dodajMarker({position: new google.maps.LatLng(53.4101,14.6033), title: 'Myjnia', icon: ikona2});
dodajMarker({position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3});
}
-->
</script>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>
<p id="info">
Zdefiniowano kilka ikonek
</p>
</body>
</html>
- W liniach 41. - 44. dodawane są markery na mapę. Każdy z nich (między nawiasami klamrowymi) ma określony parametr icon, wskazujący na rodzaj ikony, który należy użyć. Dozwolone są te, które zadeklarowaliśmy (ikona1,ikona2,ikona3) - jeśli nie ustawimy tego parametru, zostanie użyta ikona domyślna.
Zwróc uwagę na sposób definiowania ikony:
var rozmiar = new google.maps.Size(32,32);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(16,16);
var ikona1 = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal2/icon38.png", rozmiar, punkt_startowy, punkt_zaczepienia);
W powyższym fragmencie kodu następuje zadeklarowanie kilku wspólnych parametrów dla stosowanych ikon (można oczywiście dla każdej ikony zadeklarować inne wartości, ale w naszym przykładzie wszystkie te wartości są takie same, więc można użyć wspólnych wartości)
- W pierwszej linijce na powyższym listingu definiujemy rozmiar ikony. Każda ze stosowanych ikon będzie miała 32 na 32 piksele.
- W drugiej linijce ustawiliśmy punkt startowy. Ta wartość jest szczególnie przydatna, jeśli w jednym pliku mamy kilka ikon. W większości prostych i średniozaawansowanych zastosowań, pożądane jest ustawienie punktu startowego na (0,0).
- w trzeciej linijce ustawiono punkt zaczepienia. Punkt zaczepienia to taki punkt, który API traktuje jako "centrum" ikony. Przykładowo, marker w kształce łezki jest domyślnie zaczepiony tak, by jego "stopka" wskazywała pożądany punkt. Współrzędne tej stopki nie pokrywają się jednak z punktem (0,0) ikony, dlatego w tym wypadku stosujemy punkt zaczepienia. W tym przykładzie podaliśmy go jako punkt w lokalnym układzie współrzędnych dla ikony odległy o 16 pikseli od lewej krawędzi i 16 pikseli od krawędzi górnej. Ponieważ ikona ma rozmiar 32x32, to ustawienie punktu zaczepienia na 16x16 spowoduje, że będzie on po prostu w środku.
Zwróć uwagę, że na razie deklarowaliśmy ogólne cechy ikon. Aby ikona posiadała te cechy, konieczne jest poinstruowanie API, że tak ma zrobić. Robi się to za pomocą konstruktora obiektu MarkerImage, który przyjmuje 4 argumenty (w tym pierwszy obowiązkowy) - są to w kolejności:
- adres URL pliku graficznego ikony
- rozmiar Size
- punkt startowy Point
- punkt zaczepienia Point
Spójrz jeszcze raz na listing powyżej, a struktura ta stanie się bardziej zrozumiała.
Została ostatnia, drobna rzecz. Stworzona w ten sposób ikona sobie istnieje gdzieś w pamięci, lecz by stała się ikoną markera, konieczne jest napisanie odpowiedniej instrukcji dla API. W poprzedniej lekcji wspomniano, że jednym z możliwych parametrów, jakie można przekazać do konstruktora markerów jest ikona. Aby zmienić domyślną ikonę dowolnego markera, należy dodać ciąg icon: nazwa_ikony do opcji markera, gdzie nazwa_ikony to jakaś zmienna, przechowująca zadeklarowaną wcześniej ikonkę. Przykładowo, odpowiednia instrukcja może wyglądać następująco:
var opcjeMarkera = {map: mapa, position: new google.maps.LatLng(53.4014,14.5104), title: 'Tu byłem 6 razy', icon: ikona3}
Przykład
Na potrzeby przykładu stworzyłem i ponazywałem odpowiednio trzy ikonki:
 ikony/polska.png |
 ikony/niemcy.png |
 ikony/czechy.png |
Teraz naniesiemy je na mapę, by oznaczały gdzie leżą państwa. Wszystko, co jest potrzebne do wykonania tego zadania zostało w zasadzie pokazane wcześniej:
// wspólne cechy ikon
var rozmiar = new google.maps.Size(30,23);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(15,12);
// flagi
var polska = new google.maps.MarkerImage("http://gmapsapi.com/ikony/polska.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var niemcy = new google.maps.MarkerImage("http://gmapsapi.com/ikony/niemcy.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var czechy = new google.maps.MarkerImage("http://gmapsapi.com/ikony/czechy.png", rozmiar, punkt_startowy, punkt_zaczepienia);
Jest to niemal ten sam kod co wyżej, różne są tylko adresy URL do ikon oraz ich parametry (rozmiar, zaczepienie, punkt startowy)
Zobacz przykład 2 aby obejrzeć kod źródłowy oraz jego efekt
przykład 2pokaż kod przykładu
Uwagi
- Jeśli chcesz uzyskać efekt przezroczystości z kanałem alpha, użyj ikon w plikach w formacie PNG z zapisanym kanałem alpha
- Setki gotowych do użycia ikon, kompatybilnych z Google Maps API znajdziesz w czwartej części kursu API v3
Przejdź do kolejnej części kursu
Tytuł następnej części kursu to Popularne, darmowe ikony dla markerów