Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript

Nakładki na powierzchnię to nakładki obrazów powiązane z współrzędnymi geograficzna, które przesuwają się, gdy przeciągasz mapę lub ją powiększasz.

Przykładowe fragmenty kodu

Repozytorium ApiDemos na GitHubie zawiera przykład, który demonstruje nakładki na powierzchnię:

Wprowadzenie

Nakładka na teren to obraz przymocowany do mapy. W przeciwieństwie do znaczników nakładki nakładane są kierowane względem powierzchni Ziemi, a nie ekranu, więc obracanie, przechylanie lub powiększanie mapy zmienia orientację obrazu. Nakładki na grunt są przydatne, gdy chcesz poprawić pojedynczy obraz w danym obszarze na mapie. Jeśli chcesz dodać rozległe obrazy, które zajmują dużą część mapy, rozważ użycie nakładki na kartę.

Dodawanie nakładki

Aby dodać GroundOverlay, utwórz obiekt GroundOverlayOptions, który definiuje zarówno obraz, jak i pozycję. Opcjonalnie możesz określić dodatkowe ustawienia, które wpłyną na pozycjonowanie obrazu na mapie. Po zdefiniowaniu opcji niezbędnych prześlij obiekt do metody GoogleMap.addGroundOverlay(), aby dodać obraz do mapy. Metoda addGroundOverlay() zwraca obiekt GroundOverlay. Jeśli chcesz go później zmodyfikować, zachowaj odwołanie do tego obiektu.

Krok po kroku:

  1. Utwórz instancję nowego obiektu GroundOverlayOptions.
  2. Określ obraz jako BitmapDescriptor.
  3. Ustaw położenie obrazu, korzystając z jednej z dostępnych metod:
    • position(LatLng location, float width, float height)
    • position(LatLng location, float width)
    • positionFromBounds(LatLngBounds bounds)
  4. W razie potrzeby skonfiguruj dowolne właściwości opcjonalne, np. transparency.
  5. Wybierz GoogleMap.addGroundOverlay(), aby dodać obraz do mapy.

W tym przykładzie pokazujemy, jak dodać nakładkę na ziemię do istniejącego obiektu GoogleMap.

Kotlin

val newarkLatLng = LatLng(40.714086, -74.228697)
val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .position(newarkLatLng, 8600f, 6500f)
map.addGroundOverlay(newarkMap)

      

Java

LatLng newarkLatLng = new LatLng(40.714086, -74.228697);

GroundOverlayOptions newarkMap = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .position(newarkLatLng, 8600f, 6500f);
map.addGroundOverlay(newarkMap);

      

Jeśli chcesz zmienić lub usunąć nakładkę terenu po dodaniu jej do mapy, pamiętaj, aby zachować obiekt GroundOverlay. Możesz zmodyfikować nakładkę, wprowadzając zmiany w tym obiekcie.

Kotlin

// Add an overlay to the map, retaining a handle to the GroundOverlay object.
val imageOverlay = map.addGroundOverlay(newarkMap)

      

Java

// Add an overlay to the map, retaining a handle to the GroundOverlay object.
GroundOverlay imageOverlay = map.addGroundOverlay(newarkMap);

      

Usuwanie nakładki

Możesz usunąć nakładkę na ziemię, korzystając z metody GroundOverlay.remove().

Kotlin

imageOverlay?.remove()

      

Java

imageOverlay.remove();

      

Zmiana nakładki

Po dodaniu na mapę obrazu nakładki możesz go zmienić za pomocą metody GroundOverlay.setImage(BitmapDescriptor).

Kotlin

// Update the GroundOverlay with a new image of the same dimension
imageOverlay?.setImage(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))

      

Java

// Update the GroundOverlay with a new image of the same dimension
imageOverlay.setImage(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922));

      

Metoda setImage() zastąpi istniejący obraz innym obrazem o tych samych wymiarach.

Umieszczanie obrazu nad powierzchnią

Pozycję nakładki na grunt można określić na 2 sposoby:

  • Użyj LatLng do wyśrodkowania nakładki, a wymiarów w metrach określamy w celu określenia rozmiaru obrazu.
  • Użyj LatLngBounds, aby określić rogi północny wschodni i południowo zachodni obrazu.

Przed dodaniem nakładki na mapę musisz określić jej położenie.

Używanie lokalizacji do umieszczania obrazu

Podczas dodawania obrazu podaj współrzędne geograficzne LatLng, do których będzie przypisana kotwica, oraz szerokość nakładki (w metrach). Wartość anchor jest domyślnie ustawiana na środek obrazu. Opcjonalnie możesz podać wysokość nakładki (w metrach). Jeśli nie podasz wysokości nakładki, zostanie ona automatycznie obliczona, aby zachować proporcje obrazu.

Poniższy kod umieszcza obraz w pozycji 40.714086, -74.228697 o szerokości 8,6 km i wysokości 6,5 km. Obraz jest zakotwiczony w lewym dolnym rogu.

Kotlin

val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .anchor(0f, 1f)
    .position(LatLng(40.714086, -74.228697), 8600f, 6500f)

      

Java

GroundOverlayOptions newarkMap = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .anchor(0, 1)
    .position(new LatLng(40.714086, -74.228697), 8600f, 6500f);

      

Pozycjonowanie obrazu za pomocą funkcji LatLngBounds

Musisz przesłać LatLngBounds zawierający obraz. Opcja LatLngBounds ustawia rogi północny wschodni i południowy zachodni obrazu. Gdy obraz zostanie narysowany na mapie, zostanie obrócony, aby pasował do jej granic. Jeśli granice nie odpowiadają pierwotnemu formatowi obrazu, obraz będzie zniekształcony.

Poniższy kod umieszcza na mapie obraz, którego prawy dolny róg jest związany z pozycją 40.712216,-74.22655, a lewy górny róg z pozycją 40.773941, -74.12544.

Kotlin

val newarkBounds = LatLngBounds(
    LatLng(40.712216, -74.22655),  // South west corner
    LatLng(40.773941, -74.12544)   // North east corner
)
val newarkMap = GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .positionFromBounds(newarkBounds)

      

Java

LatLngBounds newarkBounds = new LatLngBounds(
    new LatLng(40.712216, -74.22655),       // South west corner
    new LatLng(40.773941, -74.12544));      // North east corner
GroundOverlayOptions newarkMap = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.newark_nj_1922))
    .positionFromBounds(newarkBounds);

      

Powiąż dane z nakładką na powierzchnię

Możesz wywołać funkcję GroundOverlay.setTag(), aby zapisać dowolny obiekt danych z nakładką naziemną, i pobrać ten obiekt danych za pomocą funkcji GroundOverlay.getTag().

Ten przykładowy kod zawiera opis ciągu znaków z nakładką na podłożu:

Kotlin

val sydneyGroundOverlay = map.addGroundOverlay(
    GroundOverlayOptions()
        .image(BitmapDescriptorFactory.fromResource(R.drawable.harbour_bridge))
        .position(LatLng(-33.873, 151.206), 100f)
        .clickable(true)
)
sydneyGroundOverlay?.tag = "Sydney"

      

Java

GroundOverlay sydneyGroundOverlay = map.addGroundOverlay(new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.harbour_bridge))
    .position(new LatLng(-33.873, 151.206), 100)
    .clickable(true));

sydneyGroundOverlay.setTag("Sydney");

      

Oto kilka przykładów sytuacji, w których warto przechowywać i pobierać dane za pomocą nakładek na powierzchni:

  • Aplikacja może obsługiwać różne nakładki na mapę, a Ty chcesz je traktować inaczej po kliknięciu przez użytkownika.
  • Możesz mieć interfejs z systemem, który ma unikalne identyfikatory rekordów, gdzie nakładki reprezentują konkretne rekordy w tym systemie.
  • Dane nakładki mogą wskazywać priorytet, który określa indeks Z nakładki.

Obsługa zdarzeń nakładki na ziemię

Domyślnie nakładki na mapę nie są klikalne. Możesz włączyć i wyłączyć możliwość kliknięcia, wywołując funkcję GroundOverlay.setClickable(boolean).

Użyj OnGroundOverlayClickListener, aby nasłuchiwać zdarzeń kliknięcia na klikalnej nakładce na mapę. Aby ustawić tego odbiornika na mapie, wywołaj funkcję GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener). Gdy użytkownik kliknie nakładkę na powierzchni, otrzymasz wywołanie zwrotne onGroundOverlayClick(GroundOverlay).