Zaawansowany Android w Kotlin 04.1: Mapy Google na Androida

Te warsztaty są częścią kursu Zaawansowany Android w Kotlinie. Najwięcej korzyści z tego kursu uzyskasz, jeśli przejdziesz wszystkie ćwiczenia w kolejności, ale nie jest to obowiązkowe. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej ćwiczeń z zaawansowanego Androida w Kotlinie.

Te warsztaty to część serii, która pomoże Ci dodać mapy do aplikacji. Zalecamy wykonywanie wszystkich ćwiczeń w kolejności, ponieważ zadania są w nich przedstawiane krok po kroku.

W tej serii znajdziesz te codelaby:

• 4.1 Mapy Google na Androida
• 4.2 Dodawanie do map geofence

Tworzenie aplikacji z Mapami Google umożliwia dodawanie do nich funkcji takich jak zdjęcia satelitarne, zaawansowane elementy sterujące interfejsu map, śledzenie lokalizacji i znaczniki lokalizacji. Możesz wzbogacić standardowe Mapy Google, wyświetlając informacje z własnego zbioru danych, np. lokalizacje znanych miejsc do wędkowania lub wspinaczki. Możesz też tworzyć gry, w których gracz eksploruje świat fizyczny, np. w poszukiwaniu skarbów lub w grach w rzeczywistości rozszerzonej.

W tej lekcji utworzysz aplikację Mapy Google o nazwie Wander, która wyświetla dostosowane mapy i lokalizację użytkownika.

Wymagania wstępne

Znajomość tych zagadnień:

• Jak utworzyć podstawową aplikację na Androida i uruchomić ją w Android Studio.
• Jak tworzyć zasoby, np. ciągi znaków, i nimi zarządzać.
• Jak refaktoryzować kod i zmieniać nazwy zmiennych za pomocą Android Studio.
• Jak korzystać z Map Google jako użytkownik.
• Jak ustawić uprawnienia czasu działania.

Czego się nauczysz

• Jak uzyskać klucz interfejsu API w Konsoli interfejsów API Google i zarejestrować go w aplikacji
• Jak zintegrować mapę Google z aplikacją
• Jak wyświetlać różne typy map
• Jak dostosować styl mapy Google
• Dodawanie znaczników do mapy
• Jak umożliwić użytkownikowi umieszczenie znacznika w interesującym miejscu
• Włączanie śledzenia lokalizacji
• Jak utworzyć aplikację Wander z osadzoną Mapą Google
• Jak tworzyć niestandardowe funkcje aplikacji, takie jak znaczniki i style
• Jak włączyć śledzenie lokalizacji w aplikacji

W tym laboratorium kodowania utworzysz aplikację Wander, która wyświetla mapę Google z niestandardowym stylem. Aplikacja Wander umożliwia umieszczanie znaczników w lokalizacjach, dodawanie nakładek i wyświetlanie swojej lokalizacji w czasie rzeczywistym.

Pakiet Maps SDK na Androida wymaga klucza API. Aby uzyskać klucz interfejsu API, zarejestruj projekt na stronie Interfejsy API i usługi. Klucz interfejsu API jest powiązany z certyfikatem cyfrowym, który łączy aplikację z jej autorem. Więcej informacji o używaniu certyfikatów cyfrowych i podpisywaniu aplikacji znajdziesz w artykule Podpisywanie aplikacji.

W tym ćwiczeniu z programowania użyjesz klucza interfejsu API dla certyfikatu debugowania. Certyfikat debugowania jest z założenia niezabezpieczony, co opisano w artykule Podpisywanie kompilacji debugowania. Opublikowane aplikacje na Androida, które korzystają z pakietu Maps SDK na Androida, wymagają drugiego klucza API: klucza certyfikatu wersji. Więcej informacji o uzyskiwaniu certyfikatu wersji znajdziesz w artykule Uzyskiwanie klucza interfejsu API.

Android Studio zawiera szablon aktywności w Mapach Google, który generuje przydatny kod szablonu. Kod szablonu zawiera plik google_maps_api.xml z linkiem, który ułatwia uzyskanie klucza interfejsu API.

Uwaga: jeśli chcesz utworzyć aktywność bez użycia szablonu, wykonaj czynności opisane w sekcji Uzyskiwanie klucza interfejsu API, aby uzyskać klucz interfejsu API bez użycia linku w szablonie.

Krok 1. Utwórz projekt Wander za pomocą szablonu map

1. Utwórz nowy projekt Android Studio.
2. Wybierz szablon Aktywność w Mapach Google.

3. Nazwij projekt Wander.
4. Ustaw minimalny poziom interfejsu API na API 19. Upewnij się, że język to Kotlin.
5. Kliknij Zakończ.
6. Gdy aplikacja zostanie utworzona, przejrzyj projekt i te pliki związane z mapami, które Android Studio utworzy za Ciebie:

google_maps_api.xml – ten plik konfiguracyjny służy do przechowywania klucza interfejsu API. Szablon generuje 2 pliki google_maps_api.xml: jeden do debugowania, a drugi do wersji. Plik klucza interfejsu API dla certyfikatu debugowania znajduje się w folderze src/debug/res/values. Plik klucza interfejsu API dla certyfikatu wersji znajduje się w katalogu src/release/res/values. W tym module użyjesz tylko certyfikatu debugowania.

activity_maps.xml – ten plik układu zawiera pojedynczy fragment, który wypełnia cały ekran. Klasa SupportMapFragment jest podklasą klasy Fragment. SupportMapFragment to najprostszy sposób na umieszczenie mapy w aplikacji. Jest to otoczka widoku mapy, która automatycznie obsługuje niezbędne potrzeby związane z cyklem życia.

Możesz umieścić SupportMapFragment w pliku układu za pomocą tagu <fragment> w dowolnym tagu ViewGroup z dodatkowym atrybutem name.

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java – plik MapsActivity.kt tworzy instancję SupportMapFragment w metodzie onCreate() i używa klasy getMapAsync() do automatycznego inicjowania systemu map i widoku. Aktywność zawierająca element SupportMapFragment musi implementować interfejs OnMapReadyCallback i jego metodę onMapReady(). Metoda onMapReady() jest wywoływana po wczytaniu mapy.

Uwaga: jeśli uruchomisz teraz aplikację, mapa nie zostanie wczytana. W logach zobaczysz komunikat informujący, że klucz API nie jest prawidłowo skonfigurowany. W następnym kroku uzyskasz klucz interfejsu API, aby aplikacja wyświetlała mapę.

Uwaga: jeśli testujesz aplikację Wander na emulatorze, musisz użyć obrazu systemu, który zawiera Google Play. Na liście urządzeń wirtualnych w kolumnie Docelowe wybierz obraz, na którym widać Google Play.

Krok 2. Uzyskaj klucz interfejsu API

1. Otwórz wersję debugowania pliku google_maps_api.xml.
2. W pliku poszukaj komentarza z długim adresem URL. Parametry adresu URL zawierają szczegółowe informacje o Twojej aplikacji.
3. Skopiuj adres URL i wklej go w przeglądarce.
4. Postępuj zgodnie z instrukcjami, aby utworzyć projekt na stronie Interfejsy API i usługi. Dzięki parametrom w podanym adresie URL strona wie, że ma automatycznie włączyć pakiet Maps SDK na Androida.
5. Kliknij Utwórz klucz interfejsu API.
6. Na następnej stronie otwórz sekcję Klucze interfejsu API i kliknij utworzony przed chwilą klucz.
7. Kliknij Ogranicz klucz i wybierz Maps SDK na Androida, aby ograniczyć użycie klucza do aplikacji na Androida.
8. Skopiuj wygenerowany klucz interfejsu API. Zaczyna się od „AIza"”.
9. W pliku google_maps_api.xml wklej klucz do ciągu znaków google_maps_key w miejscu, w którym znajduje się tekst YOUR_KEY_HERE.
10. Uruchom aplikację. W aktywności powinna być widoczna osadzona mapa ze znacznikiem ustawionym w Sydney w Australii. (Znacznik Sydney jest częścią szablonu i możesz go później zmienić).

Uwaga: zastosowanie klucza interfejsu API może potrwać do 5 minut. Może być też konieczne ponowne uruchomienie Android Studio.

Krok 3. Zmień nazwę mMap

MapsActivity ma prywatny lateinit var o nazwie mMap, który jest typu GoogleMap. Aby zachować zgodność z konwencjami nazewnictwa w języku Kotlin, zmień nazwę mMap na map.

1. W MapsActivity kliknij prawym przyciskiem myszy mMap i kliknij Refaktoryzacja> Zmień nazwę...

2. Zmień nazwę zmiennej na map.

Zwróć uwagę, że wszystkie odwołania do mMap w funkcji onMapReady() również zmieniają się na map.

Mapy Google obejmują kilka typów map: normalną, hybrydową, satelitarną, terenu i „brak” (bez mapy).

Normalna mapa	Mapa satelitarna	Mapa hybrydowa	Mapa terenu

Każdy typ mapy zawiera inne informacje. Na przykład podczas korzystania z map w nawigacji samochodowej przydatne jest wyświetlanie nazw ulic, więc możesz użyć opcji normalnej. Podczas wędrówki mapa terenu może pomóc Ci określić, ile jeszcze musisz się wspinać, aby dotrzeć na szczyt.

W tym zadaniu:

1. Dodaj pasek aplikacji z menu opcji, które umożliwia użytkownikowi zmianę typu mapy.
2. Przesuń początkową lokalizację mapy do lokalizacji swojego domu.
3. Dodaj obsługę znaczników, które wskazują pojedyncze lokalizacje na mapie i mogą zawierać etykietę.

Dodawanie menu typów map

W tym kroku dodasz pasek aplikacji z menu opcji, które umożliwia użytkownikowi zmianę typu mapy.

1. Aby utworzyć nowy plik XML menu, kliknij prawym przyciskiem myszy katalog res i wybierz New (Nowy) > Android Resource File (Plik zasobów Androida).
2. W oknie nadaj plikowi nazwę map_options.
3. Jako typ zasobu wybierz Menu.
4. Kliknij OK.
5. Na karcie Kod zastąp kod w nowym pliku tym kodem, aby utworzyć opcje menu mapy. Typ mapy „brak” został pominięty, ponieważ w jego przypadku nie wyświetla się żadna mapa. Ten krok spowoduje błąd, ale w następnym kroku go rozwiążesz.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>

6. W sekcji strings.xml dodaj zasoby dla atrybutów title, aby rozwiązać błędy.

<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>

7. W MapsActivity zastąp metodę onCreateOptionsMenu() i rozwiń menu z pliku zasobu map_options.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}

8. W MapsActivity.kt zastąp metodę onOptionsItemSelected(). Zmień typ mapy za pomocą stałych typu mapy, aby odzwierciedlić wybór użytkownika.

override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}

9. Uruchom aplikację.
10. Kliknij , aby zmienić typ mapy. Zwróć uwagę, jak wygląd mapy zmienia się w różnych trybach.

Domyślnie wywołanie zwrotne onMapReady() zawiera kod, który umieszcza znacznik w Sydney w Australii, gdzie powstały Mapy Google. Domyślne wywołanie zwrotne animuje też mapę, aby przesunąć ją do Sydney.

W tym zadaniu sprawisz, że kamera mapy przesunie się do Twojego domu, powiększy obraz do określonego poziomu i umieści tam znacznik.

Krok 1. Powiększ widok domu i dodaj znacznik

1. W pliku MapsActivity.kt znajdź metodę onMapReady(). Usuń z niego kod, który umieszcza znacznik w Sydney i przesuwa kamerę. Twoja metoda powinna teraz wyglądać tak:

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}

2. Aby znaleźć szerokość i długość geograficzną swojego domu, wykonaj te czynności.
3. Utwórz wartość szerokości i długości geograficznej, a następnie wpisz ich wartości zmiennoprzecinkowe.

val latitude = 37.422160
val longitude = -122.084270

4. Utwórz nowy obiekt LatLng o nazwie homeLatLng. W obiekcie homeLatLng przekaż utworzone przed chwilą wartości.

val homeLatLng = LatLng(latitude, longitude)

3. Utwórz val, aby określić, jak bardzo chcesz powiększyć mapę. Użyj poziomu powiększenia 15f.

val zoomLevel = 15f

Poziom powiększenia określa, jak bardzo powiększona jest mapa. Poniższa lista pokazuje przybliżony poziom szczegółowości na poszczególnych poziomach powiększenia:

• 1: świat
• 5: ląd/kontynent
• 10: miasto
• 15: ulice
• 20: budynki,

4. Przesuń kamerę do pozycji homeLatLng, wywołując funkcję moveCamera() na obiekcie map i przekazując obiekt CameraUpdate za pomocą CameraUpdateFactory.newLatLngZoom(). Przekaż obiekt homeLatLng i zoomLevel.

map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))

6. Dodaj znacznik do mapy w punkcie homeLatLng.

map.addMarker(MarkerOptions().position(homeLatLng))

Ostateczna metoda powinna wyglądać tak:

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}

7. Uruchom aplikację. Mapa powinna przesunąć się do Twojego domu, powiększyć do wybranego poziomu i umieścić na nim znacznik.

Krok 2. Zezwól użytkownikom na dodawanie znacznika za pomocą długiego kliknięcia

W tym kroku dodasz znacznik, gdy użytkownik naciśnie i przytrzyma lokalizację na mapie.

1. Utwórz w pliku MapsActivity metodę setMapLongClick(), która przyjmuje argument GoogleMap.
2. Dołącz setOnMapLongClickListener do obiektu mapy.

private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}

3. W setOnMapLongClickListener() wywołaj metodę addMarker(). Przekaż nowy obiekt MarkerOptions z ustawioną pozycją na przekazaną wartość LatLng.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

4. Na końcu metody onMapReady() wywołaj funkcję setMapLongClick() z argumentem map.

override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}

5. Uruchom aplikację.
6. Naciśnij i przytrzymaj mapę, aby umieścić w danym miejscu znacznik.
7. Kliknij znacznik, aby wyśrodkować go na ekranie.

Uwaga: po kliknięciu znacznika pojawiają się przyciski nawigacji, które umożliwiają użytkownikowi korzystanie z aplikacji Mapy Google w celu nawigowania do oznaczonej pozycji.

Krok 3. Dodaj okno informacji do znacznika

W tym kroku dodasz InfoWindow, który wyświetla współrzędne znacznika po kliknięciu znacznika.

1. W usłudze setMapLongClick()setOnMapLongClickListener() utwórz val dla snippet. Fragment to dodatkowy tekst wyświetlany po tytule. W wyświetlanym fragmencie kodu zobaczysz szerokość i długość geograficzną znacznika.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

2. W addMarker() ustaw title znacznika na „Dropped Pin” (Przypięty punkt) za pomocą zasobu ciągu znaków R.string.dropped_pin.
3. Ustaw wartość snippet znacznika na snippet.

Gotowa funkcja wygląda tak:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}

4. Uruchom aplikację.
5. Kliknij i przytrzymaj mapę, aby umieścić na niej znacznik lokalizacji.
6. Kliknij znacznik, aby wyświetlić okno informacji.

Krok 4. Dodaj odbiornik POI

Domyślnie na mapie wyświetlają się ciekawe miejsca wraz z odpowiadającymi im ikonami. Obejmują one m.in. parki, szkoły i budynki rządowe. Gdy typ mapy jest ustawiony na normal, na mapie pojawiają się też punkty POI firm. Punkty POI firm reprezentują firmy, takie jak sklepy, restauracje i hotele.

W tym kroku dodasz do mapy GoogleMap.OnPoiClickListener. Ten detektor kliknięć umieszcza znacznik na mapie natychmiast po kliknięciu przez użytkownika punktu POI. Odbiornik kliknięć wyświetla też okno informacyjne zawierające nazwę punktu POI.

1. Utwórz w pliku MapsActivity metodę setPoiClick(), która przyjmuje argument GoogleMap.
2. W metodzie setPoiClick() ustaw OnPoiClickListener na przekazanym GoogleMap.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}

3. W setOnPoiClickListener() utwórz val poiMarker dla znacznika .
4. Ustaw go na znacznik za pomocą funkcji map.addMarker(), gdzie MarkerOptions ustawia title na nazwę ciekawego miejsca.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}

5. W funkcji setOnPoiClickListener() wywołaj showInfoWindow() w poiMarker, aby natychmiast wyświetlić okno informacji.

poiMarker.showInfoWindow()

Ostateczny kod funkcji setPoiClick() powinien wyglądać tak.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}

6. Na końcu pliku onMapReady() wywołaj funkcję setPoiClick() i przekaż do niej wartość map.

override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}

7. Uruchom aplikację i znajdź punkt POI, np. park lub kawiarnię.
8. Kliknij punkt POI, aby umieścić na nim znacznik i wyświetlić jego nazwę w okienku informacyjnym.

Mapy Google możesz dostosowywać na wiele sposobów, nadając im niepowtarzalny wygląd.

Obiekt MapFragment możesz dostosować za pomocą dostępnych atrybutów XML, tak jak każdy inny fragment. W tym kroku dostosujesz jednak wygląd i styl treści elementu MapFragment za pomocą metod obiektu GoogleMap.

Aby utworzyć dostosowany styl mapy, wygeneruj plik JSON, który określa sposób wyświetlania elementów na mapie. Nie musisz tworzyć tego pliku JSON ręcznie. Google udostępnia kreator stylów Google Maps Platform, który generuje plik JSON po wizualnym dostosowaniu mapy. W tym zadaniu zastosujesz na mapie styl retro, co oznacza, że mapa będzie używać kolorów w stylu vintage, a drogi będą kolorowe.

Uwaga: stylizacja dotyczy tylko map, które korzystają z typu normal.

Krok 1. Utwórz styl mapy

1. Otwórz w przeglądarce stronę https://mapstyle.withgoogle.com/.
2. Kliknij Utwórz styl.
3. Kliknij Retro.

4. Kliknij Więcej opcji.

5. Na liście Typ funkcji wybierz Droga> Wypełnienie.
6. Zmień kolor dróg na dowolny kolor (np. różowy).

7. Kliknij Zakończ.

8. Skopiuj kod JSON z wyświetlonego okna i w razie potrzeby zapisz go w notatniku w formacie zwykłego tekstu, aby użyć go w następnym kroku.

Krok 2. Dodaj styl do mapy

1. W Android Studio w katalogu res utwórz katalog zasobów i nadaj mu nazwę raw. Zasoby katalogu raw są używane jako kod JSON.
2. Utwórz w katalogu res/raw plik o nazwie map_style.json.
3. Wklej zapisany kod JSON do nowego pliku zasobu.
4. W MapsActivity utwórz zmienną klasy TAG powyżej metody onCreate(). Jest to używane do celów rejestrowania.

private val TAG = MapsActivity::class.java.simpleName

5. W pliku MapsActivity utwórz też funkcję setMapStyle(), która przyjmuje argument GoogleMap.
6. W setMapStyle() dodaj blok try{}.
7. W bloku try{} utwórz val success, aby sprawdzić, czy stylizacja się powiodła. (Dodaj ten blok catch).
8. W bloku try{} ustaw styl JSON na mapę, wywołaj setMapStyle() na obiekcie GoogleMap. Przekaż obiekt MapStyleOptions, który wczytuje plik JSON.
9. Przypisz wynik do zmiennej success. Metoda setMapStyle() zwraca wartość logiczną wskazującą stan powodzenia analizy pliku stylu i ustawienia stylu.

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}

10. Dodaj instrukcję warunkową dla wartości success równej false. Jeśli stylizacja się nie powiedzie, wydrukuj dziennik z informacją o niepowodzeniu analizy.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}

11. Dodaj blok catch{}, aby obsłużyć sytuację, w której brakuje pliku stylu. Jeśli w bloku catch nie można wczytać pliku, zgłoś błąd Resources.NotFoundException.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

Gotowa metoda powinna wyglądać tak:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

12. Na koniec wywołaj metodę setMapStyle() w metodzie onMapReady(), przekazując do niej obiekt GoogleMap.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}

13. Uruchom aplikację.
14. Ustaw mapę w trybie normal. Nowy styl powinien być widoczny z motywem retro i drogami w wybranym kolorze.

Uwaga: jeśli oddalisz widok wystarczająco mocno, drogi nie będą już widoczne na mapie.

Krok 3. Nadaj znacznikowi styl

Możesz jeszcze bardziej spersonalizować mapę, dostosowując styl znaczników. W tym kroku zmienisz domyślne czerwone znaczniki na coś bardziej atrakcyjnego.

1. W metodzie onMapLongClick() dodaj ten wiersz kodu do MarkerOptions() konstruktora, aby użyć domyślnego znacznika, ale zmienić jego kolor na niebieski.

.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

Teraz onMapLongClickListener() wygląda tak:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}

2. Uruchom aplikację. Markery, które pojawią się po długim kliknięciu, będą teraz niebieskie. Zwróć uwagę, że markery POI są nadal czerwone, ponieważ nie dodano stylu do metody onPoiClick().

Jednym ze sposobów dostosowania mapy Google jest rysowanie na niej. Ta technika jest przydatna, jeśli chcesz wyróżnić określony typ lokalizacji, np. popularne miejsca do wędkowania.

• Kształty: do mapy możesz dodawać polilinie, wielokąty i okręgi.
• GroundOverlay obiekty: nakładka na teren to obraz przymocowany do mapy. W przeciwieństwie do znaczników nakładki na ziemi są zorientowane na powierzchnię Ziemi, a nie na ekran. Obracanie, pochylanie lub powiększanie mapy zmienia orientację obrazu. Nakładki na ziemię są przydatne, gdy chcesz umieścić pojedynczy obraz w jednym obszarze na mapie.

Krok: dodawanie nakładki na ziemię

W tym zadaniu dodasz nakładkę na ziemię w kształcie Androida w lokalizacji swojego domu.

1. Pobierz ten obraz Androida i zapisz go w folderze res/drawable. (Upewnij się, że plik ma nazwę android.png).

2. W onMapReady() po wywołaniu funkcji przenoszącej kamerę do pozycji w domu utwórz obiekt GroundOverlayOptions.
3. Przypisz obiekt do zmiennej o nazwie androidOverlay.

val androidOverlay = GroundOverlayOptions()

4. Użyj metody BitmapDescriptorFactory.fromResource(), aby utworzyć obiekt BitmapDescriptor z pobranego zasobu obrazu.
5. Przekaż wynikowy obiekt BitmapDescriptor do metody image() obiektu GroundOverlayOptions.

val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))

6. Utwórz float overlaySize dla szerokości w metrach żądanej nakładki. W tym przykładzie dobrze sprawdzi się szerokość 100f.

Ustaw właściwość position obiektu GroundOverlayOptions, wywołując metodę position(), i przekaż obiekt homeLatLng oraz overlaySize.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)

7. Wywołaj funkcję addGroundOverlay() na obiekcie GoogleMap i przekaż obiekt GroundOverlayOptions.

map.addGroundOverlay(androidOverlay)

8. Uruchom aplikację.
9. Zmień wartość zoomLevel na 18f, aby wyświetlić obraz Androida jako nakładkę.

Użytkownicy często korzystają z Map Google, aby sprawdzić swoją bieżącą lokalizację. Aby wyświetlić lokalizację urządzenia na mapie, możesz użyć warstwy danych o lokalizacji.

Warstwa danych o lokalizacji dodaje do mapy Moją lokalizację. Gdy użytkownik kliknie przycisk, mapa wyśrodkuje się na lokalizacji urządzenia. Lokalizacja jest wyświetlana jako niebieski punkt, jeśli urządzenie jest nieruchome, a jako niebieski szewron, jeśli się porusza.

W tym zadaniu włączysz warstwę danych o lokalizacji.

Krok: poproś o dostęp do lokalizacji

Włączenie śledzenia lokalizacji w Mapach Google wymaga tylko 1 wiersza kodu. Musisz jednak upewnić się, że użytkownik przyznał uprawnienia do lokalizacji (za pomocą modelu uprawnień w czasie działania).

W tym kroku poproś o dostęp do lokalizacji i włącz śledzenie lokalizacji.

1. W pliku AndroidManifest.xml sprawdź, czy uprawnienie FINE_LOCATION jest już obecne. Android Studio wstawiło to uprawnienie, gdy wybrano szablon Map Google.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

2. W MapsActivity utwórz zmienną klasy REQUEST_LOCATION_PERMISSION.

private val REQUEST_LOCATION_PERMISSION = 1

3. Aby sprawdzić, czy uprawnienia zostały przyznane, utwórz w MapsActivity metodę o nazwie isPermissionGranted(). W tej metodzie sprawdź, czy użytkownik przyznał uprawnienia.

private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}

4. Aby włączyć śledzenie lokalizacji w aplikacji, utwórz w MapsActivity metodę o nazwie enableMyLocation(), która nie przyjmuje argumentów i niczego nie zwraca. Sprawdź, czy jest tam uprawnienie ACCESS_FINE_LOCATION. Jeśli uprawnienia zostały przyznane, włącz warstwę lokalizacji. W przeciwnym razie poproś o uprawnienia.

private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}

4. Wywołaj funkcję enableMyLocation() z wywołania zwrotnego onMapReady(), aby włączyć warstwę lokalizacji.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}

5. Zastąp metodę onRequestPermissionsResult(). Jeśli requestCode jest równe REQUEST_LOCATION_PERMISSION, przyznano uprawnienia, a tablica grantResults nie jest pusta i w pierwszym slocie zawiera PackageManager.PERMISSION_GRANTED, wywołaj enableMyLocation().

override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}

6. Uruchom aplikację. Powinno pojawić się okno z prośbą o dostęp do lokalizacji urządzenia. Przyznaj uprawnienia.

Uwaga: to okno może wyglądać inaczej, jeśli nie używasz interfejsu API na poziomie 29.

Na mapie pojawi się teraz bieżąca lokalizacja urządzenia oznaczona niebieską kropką. Zwróć uwagę na przycisk lokalizacji. Jeśli odsuniesz mapę od swojej lokalizacji i klikniesz ten przycisk, mapa wróci do lokalizacji urządzenia.

Uwaga: gdy uruchamiasz aplikację na emulatorze, lokalizacja może być niedostępna. Jeśli nie ustawisz lokalizacji w ustawieniach emulatora, przycisk lokalizacji będzie niedostępny.

Pobierz kod ukończonego ćwiczenia.

$  git clone https://github.com/googlecodelabs/android-kotlin-geo-maps

Możesz też pobrać repozytorium jako plik ZIP, rozpakować go i otworzyć w Android Studio.

Pobierz plik ZIP

Uwaga: musisz dodać klucz interfejsu API do kodu rozwiązania, w przeciwnym razie mapa się nie wyświetli.

• Aby korzystać z interfejsu Maps API, musisz mieć klucz interfejsu API z Konsoli interfejsów API Google.
• W Android Studio użycie szablonu aktywności Map Google generuje element Activity z jednym elementem SupportMapFragment w układzie aplikacji. Szablon dodaje też do manifestu aplikacji element ACCESS_FINE_PERMISSION, implementuje w aktywności element OnMapReadyCallback i zastępuje wymaganą metodę onMapReady().

Aby zmienić typ mapy GoogleMap w czasie działania programu, użyj metody GoogleMap.setMapType(). Mapa Google może być jednego z tych typów:

• Normalna: typowa mapa drogowa. Pokazuje drogi, niektóre obiekty stworzone przez człowieka i ważne elementy naturalne, takie jak rzeki. Widoczne są też etykiety dróg i obiektów.
• Hybrydowa: dane ze zdjęć satelitarnych z dodatkiem map drogowych. Widoczne są też etykiety dróg i obiektów.
• Satelita: dane fotograficzne. Etykiety dróg i obiektów nie są widoczne.
• Teren: dane topograficzne. Mapa zawiera kolory, poziomice i etykiety oraz cieniowanie perspektywiczne. Widoczne są też niektóre drogi i etykiety.
• Brak: brak kafelków mapy bazowej.

Informacje o Mapach Google:

• Znacznik to wskaźnik konkretnej lokalizacji geograficznej.
• Po kliknięciu znacznika domyślnie wyświetla się okno informacyjne z informacjami o lokalizacji.
• Domyślnie ciekawe miejsca są wyświetlane na mapie bazowej wraz z odpowiednimi ikonami. Obejmują one m.in. parki, szkoły i budynki rządowe.
• Dodatkowo ważne miejsca związane z firmami (sklepy, restauracje, hotele itp.) są domyślnie wyświetlane na mapie, gdy typ mapy to normal.
• Kliknięcia w przypadku POI możesz rejestrować za pomocą OnPoiClickListener.
• Za pomocą kreatora stylów możesz zmienić wygląd niemal wszystkich elementów Map Google. Kreator stylów generuje plik JSON, który przekazujesz do Mapy Google za pomocą metody setMapStyle().
• Możesz dostosować znaczniki, zmieniając domyślny kolor lub zastępując domyślną ikonę znacznika niestandardowym obrazem.

Inne ważne informacje:

• Użyj nakładki na ziemię, aby przypiąć obraz do lokalizacji geograficznej.
• Użyj obiektu GroundOverlayOptions, aby określić obraz, jego rozmiar w metrach i pozycję. Przekaż ten obiekt do metody GoogleMap.addGroundOverlay(), aby ustawić nakładkę na mapie.
• Jeśli Twoja aplikacja ma uprawnienie ACCESS_FINE_LOCATION, możesz włączyć śledzenie lokalizacji, ustawiając wartość map.isMyLocationEnabled = true.
• Nie jest to omówione w tym laboratorium, ale możesz podać dodatkowe informacje o lokalizacji, korzystając z Google Street View, czyli interaktywnego zdjęcia panoramicznego danej lokalizacji.

Dokumentacja dla deweloperów aplikacji na Androida:

• Rozpocznij
• Dodawanie mapy ze znacznikiem
• Obiekty mapy
• Dodawanie mapy stylizowanej
• Street View
• Obrazy na powierzchni

Dokumentacja:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

Linki do innych ćwiczeń z tego kursu znajdziesz na stronie docelowej ćwiczeń z zaawansowanego Androida w Kotlinie.