Okna informacyjne pozwalają wyświetlać dane w tak zwanych “dymkach” pojawiających na mapie po kliknięciu w marker.
Spis treści
Aplikacja
Poniższa aplikacja pozwala na przetestowanie działania większości pól opcji okna informacyjnego. Dostęp do źródła można uzyskać poprzez kliknięcie prawym przyciskiem myszy w obszar aplikacji i wybranie opcji “View Source” z menu kontekstowego.
Otwarcie okna informacyjnego
Okno informacyjne nie posiada konstruktora. Jest tworzone jedynie poprzez wywołanie metody openInfoWindow klasy Marker. Na poniższym przykładzie przedstawiony jest sposób otwarcia okna informacyjnego w funkcji obsługującej zdarzenie kliknięcia w marker:
event.target.openInfoWindow();
}
Metoda openInfoWindow przyjmuje dwa opcjonalne parametry:
- options: Obiekt klasy InfoWindowOptions definiujący właściwości okna informacyjnego.
- useSeparatePane: Wartość logiczna określająca czy okno informacyjne zostanie wygenerowane na własnej warstwie. Podczas korzystania z mapy 3D domyślnie okno informacyjne generowane jest na tej samej warstwie co marker dzięki czemu jest umieszczane w tej samej odległości od obserwatora co marker. Ustawienie tego parametru na true w przypadku korzystania z mapy 3D wymusi wygenerowanie okna informacyjnego na oddzielnej warstwie tak jak ma to miejsce w przypadku korzystania z mapy 2D.
Opcje okna informacyjnego
Za pomocą obiektu klasy InfoWindowOptions możemy ustawić następujące właściwości okna informacyjnego:
- content: Treść pojawiająca się w oknie informacyjnym.
- contentFormat: Obiekt typu TextFormat definiujący wygląd treści podanej w polu content.
- contentHTML: Treść pojawiająca się oknie informacyjnym zapisana w formacie HTML.
- contentStyleSheet: Obiekt typu StyleSheet definiujący arkusz stylów treści okna informacyjnego.
- cornerRadius: Stopień zaokrąglenia narożników okna informacyjnego.
- customCloseRect: Obiekt typu Rectangle określający obszar, w obrębie którego kliknięcie będzie zamykało okno informacyjne. W przypadku kiedy ustawiona jest własność customContent wtedy wyznaczony obszar zamykający okno nie będzie widoczny, ale pozostanie aktywny. Natomiast w przypadku kiedy własność customContent jest równa null wtedy obszar customCloseRect może zostać użyty do w celu narysowania przycisku zamykającego okno w wybranym miejscu.
Poniższy rysunek pokazuje domyśle ustawienie przycisku zamykającego okno oraz jego przykładowe ustawienie za pomocą pola customCloseRect.
- customContent: Obiekt typu DisplayObject, który zostanie narysowany zamiast okna informacyjnego.
- customOffset: Obiekt typu Point określający przesunięcie obiektu zdefiniowanego w polu customContent. W przypadku kiedy pole customContent nie jest ustawione lub kiedy pole drawDefaultFrame posiada wartość true wtedy pole customOffset nie będzie brane pod uwagę podczas rysowania okna informacyjnego.
- drawDefaultFrame: Wartość logiczna określająca czy okno informacyjne mają być rysowane jako tło obiektu zdefiniowanego w polu customContent.
Poniższy rysunek przedstawia zestawienie wyniku rysowania okna informacyjnego ze zdefiniowanym polem customContent przy włączonej i wyłączonej opcji drawDefaultFrame..
- fillStyle: Obiekt typu FillStyle określający styl wypełnienia okna informacyjnego.
- hasCloseButton: Wartość logiczna określająca czy na oknie informacyjnym będzie rysowany przycisk zamykający.
- hasShadow: Wartość logiczna określająca czy okno informacyjne będzie rzucało cień na mapę.
- hasTail: Wartość logiczna określająca czy okno informacyjne będzie posiadać ogon.
- height: Wysokość okna informacyjnego.
- padding: Wielkość odstępu pomiędzy tytułem i treścią okna informacyjnego a jego obramowaniem.
- pointOffset: Obiekt typu Point określający przesunięcie okna informacyjnego.
- strokeStyle: Obiekt typu StrokeStyle określający styl obrysowania okna informacyjnego.
- tailAlign: Wyrównanie ogona okna informacyjnego. Dostępne wartości tego pola to:
- InfoWindowOptions.ALIGN_LEFT,
- InfoWindowOptions.ALIGN_CENTER,
- InfoWindowOptions.ALIGN_RIGHT.
- tailHeight: Wysokość ogona okna informacyjnego.
- tailOffset: Obiekt typu Point określający przesunięcie ogona okna informacyjnego.
- tailWidth: Szerokość ogona okna informacyjnego.
- title: Nagłówek okna informacyjnego.
- titleFormat: Obiekt typu TextFormat definiujący wygląd napisu podanego w polu title.
- titleHTML: Nagłówek okna informacyjnego zapisany w formacie HTML.
- titleStyleSheet: Obiekt typu StyleSheet definiujący arkusz stylów tytułu okna informacyjnego
- width: Szerokość okna informacyjnego.
Przykładowe zastosowanie:
fillStyle: new FillStyle({
color: 0xffffff,
alpha: 1
}),
strokeStyle: new StrokeStyle({
color: 0x000000,
alpha: 1,
thickness: 2
}),
title: "Title",
hasTail: true,
hasCloseButton: true,
contentHTML: "<b>ContentHTML</b>",
padding: 10,
widht: 320,
height: 100,
tailOffset: 20,
pointOffset: new Point(0,-60),
drawDefaultFrame: false,
hasShadow: false,
cornerRadius: 20
});
Żeby zastosować tak stworzony obiekt klasy InfoWindowOptions przekazujemy go jako parametr metody openInfoWindow klasy Marker.
