Flexmaniak.pl » Google Maps API

Flex i Google Maps API

Piotr Wierzgała — Wed, 09 Jun 2010 15:38:43 +0000

Google Maps API to zestaw narzędzi do wyświetlania i zarządzania mapami niemal wszystkich rejonów świata. Dzięki tej bibliotece będziemy mogli dodawać do mapy oznaczenia, okna informacyjne, obsługiwać zdarzenia interakcji z mapą, rysować po mapie własne kształty, geolokalizować obiekty architektoniczne, ulice, miasta, rejony geograficzne itd., wyznaczać trasy pomiędzy wybranymi lokacjami oraz korzystać różnych z innych funkcji map Google.

Spis treści

Flex i Google Maps API – wyznaczanie trasy

Piotr Wierzgała — Wed, 09 Jun 2010 15:38:26 +0000

Wyznaczanie trasy pomiędzy dowolnymi lokacjami to jedna z usług do jakiej dostęp umożliwia Google Maps API. Dzięki niej ustalimy parametry wyznaczania trasy, odrysujemy na mapie trasę przebiegającą przez dowolną ilość lokacji oraz uzyskamy dostęp do wskazówek podróży, które pozwolą nam podążać wzdłuż określonej ścieżki.

Wysłanie zapytania wyznaczenia trasy
Odebranie wyniku zapytania wyznaczenia trasy
- Wyznaczanie trasy zakończyło się sukcesem
- Wyznaczanie trasy zakończyło się błędem

Aplikacja

Poniższa aplikacja demonstruje możliwości usługi Driving Directions: wyznaczania trasy pomiędzy dwiema lub trzema lokacjami, ustawiania parametrów wyznaczania trasy, odrysowywania trasy na mapie, przeglądania wskazówek podróżowania według wyznaczonej trasy. 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.

Przygotowanie komunikacji z usługą

W celu wyznaczenia trasy musimy posłużyć się obiektem klasy Directions. Za jego pośrednictwem ustawimy wszystkie parametry wyznaczania trasy, wyślemy zapytanie do serwera i odbierzemy jego wynik. Do obiektu klasy Directions dodajemy nasłuchiwanie na dwa zdarzenia: DirectionsEvent.DIRECTIONS_SUCCESS i DirectionsEvent.DIRECTIONS_FAILURE, które będą informować nas odpowiednio o pomyślnym lub niepomyślnym zakończeniu procesu wyznaczania trasy.

var directions:Directions = new Directions();
directions.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, directions_DIRECTIONS_SUCCESS);
directions.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, directions_DIRECTIONS_FAILURE);

Parametry wyznaczania trasy

Parametry wyznaczania trasy określamy za pomocą obiektu klasy DirectionsOptions, który możemy przekazać do konstruktora klasy Directions lub ustawić ustawić w dowolnym momencie za pomocą metody setOptions klasy Directions. Określić możemy cztery parametry:

avoidHighways - Wartość logiczna określająca czy autostrady mają być brane pod uwagę podczas wyznaczania trasy. Domyślna wartość to true.
countryCode - Oznaczenie kraju („PL”,”EN” itp.) dla zapytania wyznaczania trasy. W przypadku nie ustawienia tego parametru zostanie użyta wartość zapisana w polu countryCode mapy (o ile sama została ustawiona). Nie zauważyłem żadnych zmian w działaniu aplikacji przy różnych ustawieniach tego parametru.
language - Język („en”, „pl” itd.) dla zapytania dla wyznaczania trasy. W przypadku nie ustawienia tego parametru zostanie użyta wartość zapisana w polu language mapy, a jeżeli i ta wartość nie jest ustawiona wtedy język zostanie ustalony na podstawie ustawień przeglądarki. Wartość tego parametru wpływa na język w jakim będą dostępne opisy kolejnych kroków trasy.
travelMode - Rodzaj podróżowania dla jakiego zostanie wyznaczona trasa. Do wyboru mamy podróżowanie przy pomocy auta lub pieszo, dla których parametr powinien przyjąć odpowiednio wartości: TRAVEL_MODE_DRIVING lub TRAVEL_MODE_WALKING. Wartość domyślna to TRAVEL_MODE_DRIVING.

Przykład:

var options:DirectionsOptions = new DirectionsOptions({
avoidHighways: true,
language: 'en',
countryCode: 'US',
travelMode: DirectionsOptions.TRAVEL_MODE_WALKING
});

Wysłanie zapytania wyznaczenia trasy

Zapytanie wyznaczenia trasy wysyłamy za pomocą metody load klasy Directions, która jako parametr przyjmuje łańcuch opisujący lokacje przez jakie powinna przebiegać trasa.

directions.load("from: Lublin to: Warszawa to: Kraków");

Minimalnie wystarczy podać jedna lokację po „from:” i jedną po „to:”. Jeżeli jednak chcemy wyznaczyć trasę przebiegającą przez jakieś konkretne lokacje wtedy podajemy je, w dowolnej ilości, po kolejnych ciągach „to:”. Zamiast podawania nazw lokacji dopuszczalne jest podawanie ich współrzędnych geograficznych. Można w tym celu skorzystać z geolokaliztatora dostępnego np. w aplikacjach zamieszczonych we wpisach „Flex i Google Maps API – rysowanie po mapie” lub „Flex i Google Maps API – geolokalizacja”.

Odebranie wyniku zapytania wyznaczenia trasy

Po wywołaniu metody load wykonany zostanie kod jednej z dwóch funkcji obsługujących zdarzenia pomyślnego i niepomyślnego zakończenia procesu wyznaczania trasy.

Wyznaczanie trasy zakończyło się sukcesem

Po pomyślnym wyznaczeniu trasy możemy odwołać się do obiektu directions w celu uzyskania różnych interesujących nas danych trasy takich jak:

długość trasy,
przybliżony czas trwania podróży,
opis kolejnych kroków podróży,
graficzna reprezentacja trasy.

Dostęp do trzech pierwszych uzyskujemy poprzez wywołanie metody getRoute obiektu directions, która jako parametr przyjmuje numer trasy. Jeżeli trasa została wyznaczona od punktu A do punktu B wtedy istnieje tylko jedna trasa. Jeżeli jednak wysłaliśmy zapytanie, w którym zdefiniowaliśmy np. dwie dodatkowe lokacje na drodze do punktu docelowego wtedy będziemy posiadali dostęp do trzech tras łączących odpowiednio punkty: A-B, B-C, C-D. Każda z tych tras będzie miała oddzielnie określoną długość, czas podróży oraz kolejne kroki podróży.

Przykładowe pobranie danych o długości trasy i czasie podróży:

routeLengthTextArea.htmlText = directions.getRoute(routeIndex).distanceHtml;
travelTimeTextArea.htmlText = directions.getRoute(routeIndex).durationHtml;

Dostęp do poszczególnych kroków podróży uzyskujemy poprzez wywołanie metody getStep na wyniku zwróconym przez metodę getRoute. Metoda getStep zwraca obiekt klasy Step, który zawiera informacje o wybranym kroku podróży:

opis,
czas wykonania,
współrzędne graficzne,
indeks pierwszego punktu tworzącego ten krok w graficznej reprezentacji trasy.

Przykładowe pobranie opisu pierwszego kroku pierwszej trasy:

stepTextArea.htmlText = directions.getRoute(0).getStep(0).descriptionHtml;

Chcąc narysować na mapie kształt trasy wystarczy dodać jako warstwę rezultat wywołania metody createPolyline.

map.addOverlay(directions.createPolyline());

Wyznaczanie trasy zakończyło się błędem

W przypadku wystąpienia błędu podczas wyznaczania trasy wywołana zostanie funkcja obsługująca zdarzenie DirectionsEvent.DIRECTIONS_FAILURE. Żeby zidentyfikować przyczynę błędu pobieramy jego kod znajdujący się w polu status zdarzenia i sprawdzamy jego znaczenie w dokumentacji lub poniżej:

400: Zapytanie nie mogło zostać poprawnie przetworzone przez serwer
500: Wystąpiły problemy po stronie serwera geolokalizacji.
601: Nie podano adresu do geolokalizacji.
602: Nieznany lub nieprawidłowy adres.
603: Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony.
604: Trasa nie może zostać wyznaczona.
620: Liczba dozwolonych zapytań w ciągu ostatnich 24 godzin została przekroczona.

Przykładowa implementacja metody obsługującej zdarzenie niepomyślnego wyznaczenia trasy:

private function directions_DIRECTIONS_FAILURE(event:DirectionsEvent):void {
var description:String;
switch (event.directions.status) {
case 400: description = "Zapytanie nie mogło zostać poprawnie przetworzone przez serwer."; break;
case 500: description = "Wystąpiły problemy po stronie serwera geolokalizacji."; break;
case 601: description = "Nie podano adresu do geolokalizacji."; break;
case 603: description = "Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony."; break;
case 602: description = "Nieznany lub nieprawidłowy adres."; break;
case 603: description = "Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony."; break;
case 604: description = "Trasa nie może zostać wyznaczona."; break;
case 620: description = "Liczba dozwolonych zapytań w ciągu ostatnich 24 godzin została przekroczona."; break;
default: description = "Nieobsługiwany błąd: "+event.directions.status;
}
Alert.show(description,"Błąd");
}

Flex i Google Maps API – geolokalizacja

Piotr Wierzgała — Wed, 09 Jun 2010 15:38:14 +0000

Geolokalizacja jest jedną z usług, z której możemy korzystać za pomocą Google Maps API. Dzięki niej posługując się odpowiednimi słowami kluczowymi odnajdziemy na mapie świata dowolną lokację: ulicę, miasto, państwo, obiekt architektoniczny czy krainę geograficzną.

Spis treści

Aplikacja
Przygotowanie komunikacji z usługą
Parametry geolokalizacji

Wysłanie zapytania geolokalizacji
Odebranie wyniku zapytania geolokalizacji
- Geolokalizacja zakończyła się sukcesem
- Geolokalizacja zakończyła się błędem

Aplikacja

Poniższa aplikacja demonstruje możliwości usługi Geocoding. Dodatkowo pokazuje wszystkie informacje zwrócone przez serwer po pomyślnym przetworzeniu zapytania. 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.

Przygotowywania komunikacji z usługą

Z usługi gelokalizacji będziemy korzystać za pomocą klasy ClientGeocoder. Jej konstruktor przyjmuje tylko jeden, opcjonalny parametr, którym jest obiekt klasy ClientGeocoderOptions definiujący parametry geolokalizowania.
Po utworzeniu instancji klasy ClientGeocoder dodajemy do niej nasłuchiwanie zdarzeń: GeocodingEvent.GEOCODING_SUCCESS i GeocodingEvent.GEOCODING_FAILURE, które będą informować nas odpowiednio o pomyślnym lub niepomyślnym zakończeniu procesu geolokalizacji.

var clientGeocoder:ClientGeocoder = new ClientGeocoder;
clientGeocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, clientGeocoder_GEOCODING_SUCCESS);
clientGeocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, clientGeocoder_GEOCODING_FAILURE);

Parametry geolokalizacji

Parametry geolokalizacji określamy za pomocą obiektu klasy ClientGeocoderOptions, który możemy przekazać do konstruktora klasy ClientGeocoder lub ustawić ustawić w dowolnym momencie za pomocą metody setOptions klasy ClientGeocoder. Określić możemy trzy parametry:

countryCode: Oznaczenie kraju („PL”,”EN” itp.) dla zapytania geolokalizacji. W przypadku nie ustawienia tego parametru jego wartość zostanie ustalona na podstawie ustawień przeglądarki. Nie zauważyłem żadnych zmian w działaniu aplikacji przy różnych ustawieniach tego parametru.
language: Język („en”, „pl” itd.) dla zapytania dla geolokalizacji. W przypadku nie ustawienia tego parametru jego wartość zostanie ustalona na podstawie ustawień przeglądarki. Wartość tego parametru wpływa na język w jakim będą dostępne informacje o lokacji.
viewport: Współrzędne wyznaczające obszar podwyższonego priorytetu w procesie geolokalizacji. Jeżeli w wyznaczonym obszarze znajdzie się lokacja pasująca do słów kluczowych wtedy wtedy zostanie zwrócona tylko ona, w przeciwnym razie zostaną zwrócone wszystkie odnalezione lokacje

Przykład:

var clientGeocoderOptions:ClientGeocoderOptions = new ClientGeocoderOptions({
countryCode: "EN",
language: "en",
viewport: new LatLngBounds(
new LatLng(51.00,22.05),
new LatLng(51.53,23.10)
)
});

Wysłanie zapytania geolokalizacji

Zapytanie geolokalizacji wysyłamy za pomocą metody geocode klasy ClientGeocoder, która jako parametr przyjmuje łańcuch opisujący szukaną lokację.

Przykład:

clientGeocoder.geocode("stara wieś");

Odebranie zapytania geolokalizacji

Po wywołaniu metody geocode wykonany zostanie kod jednej z dwóch funkcji obsługujących zdarzenia pomyślnego i niepomyślnego zakończenia procesu geolokalizacji.

Geolokalizacja zakończyła się sukcesem

W przypadku pomyślnego zakończenia geolokalizacji wywołana zostanie funkcja obsługująca zdarzenie GeocodingEvent.GEOCODING_SUCCESS. W niej odwołujemy się kolejno do pól request i placermarks zdarzenia w celu uzyskania dostępu do danych wszystkich lokacji pasujących do klucza. Dane przechowywane są w tablicy ponieważ do jednego klucza może pasować wiele lokacji. Wystarczy np. zlecić geolokalizatorowi odnalezienie „starej wsi” aby przekonać się o tym, że jest ich w Polsce co najmniej dziesięć.

Przykład:

private function clientGeocoder_GEOCODING_SUCCESS(event:GeocodingEvent):void {
var placemarks:Array = event.response.placemarks;
}

Tablica placemarks zawiera obiekty klasy Placemark, które przechowują dane o:

adresie lokacji (typ: String),
szczegółach adresu lokacji (typ: Object),
współrzędnych geograficznych lokacji (typ: LatLng).

Dostęp do powyższych danych uzyskujemy poprzez odwołanie się do następujących pól klasy Placemark:

adres lokacji:	address
kod kraju:	AddressDetails.Country.CountryNameCode
nazwa kraju:	AddressDetails.Country.CountryName
województwo:	AddressDetails.Country.AdministrativeArea.AdministrativeAreaName
powiat:	AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.SubAdministrativeAreaName
miasto:	AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName
ulica:	AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.Thoroughfare.ThoroughfareName
kod pocztowy:	AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.PostalCode.PostalCodeNumber
dokładność:	AddressDetails.Accuracy
współrzędne:	point

Jedyną z powyższych informacji, która nie tłumaczy się sama jest dokładność. Dokładność przyjmuje wartości od 0 do 9 oznaczające stopień precyzji z jakim udało się wyznaczyć położenie danej lokacji.

Opis stopni precyzji:

0: nieokreślona,
1: państwo,
2: województwo,
3: powiat,
4: miasto,
5: kod pocztowy,
6: ulica,
7: skrzyżowanie (ang. intersection),
8: numer budynku,
9: nazwa lokacji (budynku, posiadłości, uczelni, centrum handlowego).

Ze wszystkich powyższych nie udało mi się jedynie uzyskać wyniku o stopniu dokładności równym 7 dlatego nie mam pewności co on tak naprawdę oznacza. Nie wydaje mi się żeby to było skrzyżowanie, ale też nie mam pomysłu co innego może oznaczać słowo intersection.

Geolokalizacja zakończyła się błędem

W przypadku wystąpienia błędu podczas geolokalizacji wywołana zostanie funkcja obsługująca zdarzenie GeocodingEvent.GEOCODING_FAILURE. Żeby zidentyfikować przyczynę błędu pobieramy jego kod znajdujący się w polu status zdarzenia i sprawdzamy jego znaczenie w dokumentacji lub poniżej:

400: Zapytanie nie mogło zostać poprawnie przetworzone przez serwer
500: Wystąpiły problemy po stronie serwera geolokalizacji.
601: Nie podano adresu do geolokalizacji.
602: Nieznany lub nieprawidłowy adres.
603: Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony.
620: Liczba dozwolonych zapytań w ciągu ostatnich 24 godzin została przekroczona.

Przykładowa implementacja metody obsługującej zdarzenie niepomyślnego wyznaczenia trasy:

private function clientGeocoder_GEOCODING_FAILURE(event:GeocodingEvent):void {
var description:String;
switch (event.directions.status) {
case 400: description = "Zapytanie nie mogło zostać poprawnie przetworzone przez serwer."; break;
case 500: description = "Wystąpiły problemy po stronie serwera geolokalizacji."; break;
case 601: description = "Nie podano adresu do geolokalizacji."; break;
case 603: description = "Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony."; break;
case 602: description = "Nieznany lub nieprawidłowy adres."; break;
case 603: description = "Ze względów prawnych lub innych wynik zapytania nie może zostać zwrócony."; break;
case 620: description = "Liczba dozwolonych zapytań w ciągu ostatnich 24 godzin została przekroczona."; break;
default: description = "Nieobsługiwany błąd: "+event.directions.status;
}
Alert.show(description,"Błąd");
}

Flex i Google Maps API – rysowanie po mapie

Piotr Wierzgała — Wed, 09 Jun 2010 15:38:03 +0000

Google Maps API umożliwia dodawanie trzech rodzajów graficznych elementów do mapy:

lini (łamanych),
wielokątów,
obiektów graficznych.

Do powyższej listy można zaliczyć jeszcze markery i okna informacyjne, ale ponieważ są one czymś więcej niż tylko graficznymi elementami mapy zostały omówione w oddzielnych wpisach.

Spis treści

Aplikacja
Rysowanie linii (łamanych)
Rysowanie wielokątów
Wstawianie obiektów graficznych

Aplikacja

Poniżej zamieszczam link do aplikacji, która może okazać się pomocna podczas wyznaczania współrzędnych geograficznych punktów na mapie. 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.

Rysowanie linii (łamanych)

Linię rysuje się za pomocą klasy Polyline, której konstruktor przyjmuje dwa parametry: tablicę współrzędnych geograficznych zawierającą wszystkie punkty, przez które będzie przechodzić linia oraz opcjonalny parametr będący obiektem klasy PolylineOptions definiujący właściwości rysowanej linii.

Za pomocą klasy PolylineOptions możemy zdefiniować dwa parametry rysowania linii:

geodesic: Określa czy podczas rysowania linii zostanie uwzględniona krzywizna kuli ziemskiej. Dla wartości true tego parametru kolejne punkty zostaną połączone za pomocą najkrótszej linii biegnącej po powierzchni Ziemi, w przeciwnym razie będzie to najkrótsza linia biegnąca po płaszczyźnie mapy. Domyślna wartość tego parametru to false.

Obie linie na powyższym rysunku łączą te same punkty. Różnice w kształcie wynikają z tego, że parametr geodesic czerwonej linii jest ustawiony na true a niebieskiej na false.
strokeStyle: Określa takie parametry linii jak: kolor, grubość i przeźroczystość. Kolor linii powinien zostać podany w formie szesnastkowej (np. 0xff0000). Domyślne parametry linii to: kolor: 0x0000ff, grubość: 5, przeźroczystość: 0.45.

Przykład:

var polyline:Polyline = new Polyline([
new LatLng(51.24, 22.56),
new LatLng(40.70, -74.02)],
new PolylineOptions({
geodesic: true,
strokeStyle: new StrokeStyle({
color: 0xff0000,
thickness: 4,
alpha: 0.7})
})
);

Żeby linia pojawiła się na mapie należy dodać ją do warstw mapy za pomocą metody addOverlay:

map.addOverlay(polyline);

W przypadku rysowania złożonych kształtów zaleca się kodowanie współrzędnych punktów tworzących linię za pomocą specjalnego algorytmu. Nie planuję o tym pisać dlatego zainteresowanych odsyłam do źródeł. Więcej o tworzeniu linii składających się z zakodowanych punktów można przeczytać tu a o samym algorytmie kodowaniu tu.

Rysowanie wielokątów

Wielokąt rysuje się za pomocą klasy Polygon, której konstruktor przyjmuje dwa parametry: tablicę współrzędnych geograficznych zawierającą wszystkie wierzchołki wielokąta oraz opcjonalny parametr będący obiektem klasy PolygonOptions definiujący właściwości rysowanego wielokąta.

Przykładowy wielokąt narysowany na mapie:

Zaleca się zamykanie wielokątów poprzez podawanie ostatniego punktu równego pierwszemu. Teoretycznie niezastosowanie się do tej reguły może powodować niepożądane efekty, jednak z moich kilku szybkich testów wynika, że wielokąty rysują się tak samo, niezależnie od tego czy ostatni wierzchołek pokrywa się z pierwszym czy nie.

Za pomocą klasy PolygonOptions możemy zdefiniować trzy parametry rysowania wielokątów:

fillStyle: Określa kolor i przeźroczystość wypełnienia wielokąta. Domyślne wartości wypełnienia to: kolor: 0x0055ff, przeźroczystość: 0.25.
strokeStyle: Określa kolor, grubość i przeźroczystość obrysowania wielokąta. Domyślne wartości obrysowania to: kolor: 0x0000ff, grubość: 2, przeźroczystość: 0.45.
tooltip: Informacja tekstowa wyświetlana po najechaniu kursorem myszy na wielokąt.

Przykład:

var polygon:Polygon = new Polygon([
new LatLng(51.24, 22.56),
new LatLng(52.23, 21.01),
new LatLng(51.76, 19.45),
new LatLng(51.24, 22.56)],
new PolygonOptions({
strokeStyle: new StrokeStyle({
color: 0xff0000,
thickness: 3,
alpha: 1}),
fillStyle: new FillStyle({
color: 0x00ff00,
alpha: 0.5}),
tooltip: "Ten wielokąt ma czerwone obrysowanie.",
})
);

Żeby wielokąt pojawił się na mapie należy dodać go do warstw mapy za pomocą metody addOverlay:

map.addOverlay(polygon);

Wstawianie obiektów graficznych

Obiekt graficzny wstawia się za pomocą klasy GroundOverlay , której konstruktor przyjmuje trzy parametry: referencję do obiektu graficznego typu DisplayObject, współrzędne obszaru, na którym grafika zostanie wyświetlona oraz opcjonalny parametr będący obiektem klasy GroundOverlayOptions definiujący różne cechy wstawianej grafiki.

Przykładowy obiekt graficzny wstawiony na mapę:

Za pomocą klasy GroundOverlayOptions możemy zdefiniować pięć parametrów:

applyProjection: Wartość logiczna określająca czy dany obiekt graficzny wymaga rzutowania. W przypadku ustawienia wartości true obiekt graficzny zostanie poddany rzutowaniu podczas renderowania jego warstwy (overlay), w przeciwnym razie zostanie założone, że obiekt został już poddany rzutowaniu. Domyślna wartość tego parametru to false.
renderContent: Wartość logiczna określajaca czy dany obiekt graficzny będzie renderowany na mapie czy też wyświetlany na niej w zwyczajny sposób z zastosowaniem odpowiednich przekształceń geometrycznych. Domyślanie renderContent posiada wartość true. W przypadku zmiany wartości na false parametr applyProjection zostanie zignorowany, obiekt graficzny nie będzie poddawany wygładzaniu oraz straci wsparcie 3D.

Fragment obiektu graficznego z wygładzaniem i bez wygładzania:
rotation: Określa obrót obiektu graficznego podany w stopniach i wykonany zgodnie z ruchem wskazówek zegara. Sposób jaki obrót zostanie wykonany zależy od wartości parametru applyProjection. Jeżeli jego wartość to false wtedy zostanie uznane, że obiekt graficzny został już poddany rzutowaniu i wykonany zostanie obórt. W przeciwnym razie obiekt graficzny zostanie poddany rzutowaniu na powierzchnię sfery i dopiero wtedy obrócony czego konsekwencją będzie zniekształcenie obiektu graficznego zgodnie z krzywizną sfery.

Obrót obiektu graficznego o 180 stopni względem jego środka przy różnych wartościach parametru applyProjection:
rotationContentCenter: Współrzędne punktu, wokół którego obiekt graficzny będzie obracany. Domyślnie obrót nastąpi wokół środka obiektu graficznego.
strokeStyle: Określa obrysowanie obiektu graficznego. Korzystanie z tego parametru wygląda tak samo jak w przypadku linii i wielokątów. Obrysowanie zadziałało u mnie dopiero po ustawieniu parametru renderContent na false, trudno powiedzieć dlaczego – w dokumentacji nie ma mowy o istnieniu takiej zależności.

Przykład:

var groundOverlay:GroundOverlay = new GroundOverlay(
new ShipIcon() as DisplayObject,
new LatLngBounds(new LatLng(54.48,18.64), new LatLng(54.53,18.88)),
new GroundOverlayOptions({
strokeStyle: {
color: 0xff0000,
alpha: 1,
thickness: 3
},
rotation: 180,
rotationContentCenter: new Point(100,100),
applyProjection: true,
renderContent: false
})
);

Gdzie ShipIcon jest ikoną statku wkompilowaną w aplikację.

Żeby obiekt graficzny pojawił się na mapie należy dodać go do warstw mapy za pomocą metody addOverlay:

map.addOverlay(groundOverlay);

Flex i Google Maps API – okna informacjyne

Piotr Wierzgała — Wed, 09 Jun 2010 15:37:53 +0000

Okna informacyjne pozwalają wyświetlać dane w tak zwanych „dymkach” pojawiających na mapie po kliknięciu w marker.

Spis treści

Aplikacja
Otwarcie okna informacyjnego
Opcje okna informacyjnego

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:

private function marker_CLICK(event:MapEvent):void {
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:

var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions({
fillStyle: new FillStyle({
color: 0xffffff,
alpha: 1
}),
strokeStyle: new StrokeStyle({
color: 0x000000,
alpha: 1,
thickness: 2
}),
title: "Title",
hasTail: true,
hasCloseButton: true,
contentHTML: "ContentHTML",
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.

Flex i Google Maps API – markery

Piotr Wierzgała — Wed, 09 Jun 2010 15:37:38 +0000

Markery służą do oznaczania wybranych pozycji na mapie. Domyślna ikona markera to mały, blado-czerwony, obrazek z czarnym obramowaniem w kształcie odwróconej łzy.

Spis treści

Aplikacja
Marker
Opcje markera

Aplikacja

Poniższa aplikacja pozwala na przetestowanie działania większości pól opcji markera. 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.

Marker

Marker tworzymy za pomocą klasy Marker. Jej konstruktor przyjmuje dwa parametry: współrzędne geograficzne, które będzie oznaczał marker, oraz opcjonalnie obiekt klasy MarkerOptions definiujący właściwości markera. Po stworzeniu markera dodajemy go do mapy za pomocą metody addOverlay.

Przykład:

var marker:Marker = new Marker(
new LatLng(51.24,22.56),
new MarkerOptions()
);
map.addOverlay(marker);

Opcje markera

Właściwości markera jakie możemy ustawić za pomocą klasy MarkerOptions to:

clickable: Wartość logiczna określająca czy marker będzie klikalny. Markery, które nie są klikalne nie generują zdarzeń MapMouseEvent.CLICK i MapMouseEvent.DOUBLE_CLICK, ale mogą, o ile ich zmienna draggable ma wartość true, generować inne zdarzenia. Nad markerami, które nie są klikalne nie pojawia się kursor dłoni.
distanceScaling: Wartość logiczna określająca czy marker będzie skalowany wraz ze zmianą odległości na mapie 3D. Wartość tej zmiennej jest ignorowana jeżeli mapa 3D nie jest aktywna.
draggable: Wartość logiczna określająca czy marker będzie mógł przeciągany po mapie.
gravity: Siła z jaką marker będzie przyciągany do mapy.
hasShadow: Wartość logiczna określająca czy marker będzie rzucał cień.
tooltip: Treść napisu pojawiającego się po najechaniu na marker.
label: Treść napisu wyświetlanego na markerze.
labelFormat: Obiekt typu TextFormat definiujący wygląd napisu wyświetlanego na markerze.
radius: Określa promień (rozmiar) markera.
fillStyle: Obiekt typu FillStyle określający styl wypełnienia markera.
strokeStyle: Obiekt typu StrokeStyle określający styl obrysowania markera.
icon: Obiekt typu DisplayObject określający ikonę markera.
iconAlignment: Określa punkt markera, który zostanie użyty do wyrównania jego pozycji względem przypisanych mu współrzędnych geograficznych.
iconOffset: Obiekt klasy Point określający wartości przesunięcia markera wzdłuż osi X i Y względem punktu wyrównania markera (icon alignment).

Przykład:

var markerOptions:MarkerOptions = new MarkerOptions({
clickable: true,
hasShadow: true,
radius: 20,
gravity: 10,
iconOffset: new Point(0,0),
tooltip: "tooltip",
label: "label ",
fillStyle: new FillStyle({
color: 0xff0000,
alpha: .7
}),
strokeStyle: new StrokeStyle({
color: 0x000000,
alpha: 1,
thickness: 2
})
});

Żeby zastosować tak stworzony obiekt klasy MarkerOptions przekazujemy go jako drugi parametr konstruktora klasy Marker lub jako parametr metody setOptions klasy Marker.

Flex i Google Maps API – wstęp

Piotr Wierzgała — Wed, 09 Jun 2010 15:36:39 +0000

Zbiór informacji na temat bibiloteki Google Maps jakie można uznać za wstępne to: podstawowe warunki korzystanie z map, sposób dodania mapy w aplikacji, różne problemy związane z użytkowaniem map Google oraz przydatne linki.

Spis treści

Warunki korzystania z map
Dodanie mapy do aplikacji
Problem bindowania
Przydatne linki

Warunki korzystania z map

Pełną licencję korzystania z map Google można przeczytać tu lub podczas generowania klucza – o czym mowa w sekcji „Dodanie mapy do aplikacji„. Niektóre z najważniejszych warunków licencji na jakie zwraca uwagę Google to:

Nie ma żadnego limitu na liczbę stron wygenerowanych z użyciem Google Maps API.
Limit na liczbę geolokalizacji wynosi 2 500 na dobę. Po przekroczeniu tej bariery geocoder będzie zwracał błąd o statusie 620. Ten sam błąd może być zwracany również w przypadku zbyt częstego wysyłania zapytań o geolokalizację.
Korzystanie z usługi Google Maps musi być całkowicie darmowe i ogólnodostepne.
Google Maps nie zawiera żadnej formy reklamy narzuconej przez Google a gdyby miałoby się to zmienić użytkownicy zostaną o tym poinformowani z co najmniej 90-o dniowym wyprzedzeniem za pomocą subskrypcji lub grupy dyskusyjnej.
Nie zezwala się na zasłanianie lub edytowanie loga Google widocznego na mapie.

Całkiem dokładny opis warunków umowy znalazłem na blogu Macieja Marczewskiego i zgodnie z zasadą Ockhama nie będę mnożył bytów ponad potrzebę pisząc ponownie to samo tylko odsyłam wszystkich zainteresowanych na wspomniany blog.

Dodanie mapy do aplikacji

Zaczynamy od utworzenia klucza Google Maps API, dzięki któremu będziemy mogli korzystać z biblioteki Google Maps. Każdy wygenerowany klucz będzie działać tylko w obrębie domeny lub katalogu jaki podamy podczas generowania klucza. Nie ma ograniczenia na ilość wygenerowanych kluczy.

Następnie pobieramy interesujące nas biblioteki. W pobranym archiwum znajdziemy dwa pliki o rozszerzeniu swc. Wybieramy z nich ten, który ma w nazwie słowo flex i kopiujemy go do katalogu libs naszego projektu. Pozostały plik przeznaczony jest dla aplikacji typu AIR.

Na koniec dodajemy do aplikacji poniższy kod a jako wartość atrybutu ‘key‘ podajemy klucz, którzy przed chwilą wygenerowaliśmy.

<maps:Map id="map"
key="Klucz_Google_Maps_API"
mapevent_mapready="onMapReady(event)" />

W funkcji obsługującej zdarzenie mapevent_mapready umieszczamy kod, który zostanie wykonany po utworzeniu obiektu mapy. Jeżeli spróbujemy zrobić coś z mapą przed wywołaniem tego zdarzenia najprawdopodobniej zobaczymy błąd odwołania do obiektu typu null.

Przykładowa definicja funkcji obsługującej zdarzenie mapevent_mapready:

private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(50.06,19.94));
map.addControl(new ZoomControl);
map.addControl(new MapTypeControl);
}

Problem bindowania

Bindowanie nie działa z obiektami biblioteki Google Maps. Jeżeli chcielibyście w swojej aplikacji umieścić slider, który zmieniałby np. rozmiar markera na pewno nie osiągniecie tego przypisując polu value slidera wartosć pola radius markera.

<s:HSlider value="{marker.radius}"/>

Sposobem w jaki można to obejść jest dodanie nasłuchiwania na zdarzenie chage slidera i zmienianie rozmiaru markera w metodzie obsługującej to zdarzenie:

<fx:Script>
[CDATA[
private function radiusSlider_CHANGE(event:Event):void {
marker.getOptions().radius = event.target.value;
}
]
fx:Script>

<s:HSlider id="radiusSlider" change="radiusSlider_CHANGE(event)"/>

Problem został zgłoszony w odpowiednie miejsce już jakiś czas temu. Pod tym adresem można śledzić rozwój sytuacji.