Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript

Nakładki na powierzchnię to nakładki obrazów powiązane z współrzędnymi geograficznymi, 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 mapę:

Wprowadzenie

Nakładka naziemna to obraz przymocowany do mapy. W przeciwieństwie do znaczników nakładki na mapę są zorientowane względem powierzchni Ziemi, a nie ekranu, więc obracanie, przechylanie i powiększanie mapy powoduje zmianę orientacji 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.

Umieszczenie nakładki na powierzchnię

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

  • Użyj LatLng, aby wyśrodkować nakładkę, oraz wymiarów w metrach, aby określić rozmiar 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.

Podany niżej kod umieszcza obraz w pozycji 40.714086, -74.228697o 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);

Używanie LatLngBounds do umieszczania obrazu

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 obraz na mapie, 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ązanie danych z nakładką naziemną

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().

Poniższy przykładowy kod przechowuje opis ciągu znaków z nakładką na ziemi:

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 przydatne jest przechowywanie i pobieranie danych z nakładek na mapie:

  • Twoja aplikacja może obsługiwać różne nakładki na mapę i chcesz je traktować inaczej, gdy użytkownik kliknie jedną z nich.
  • 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 służy do określenia indeksu Z nakładki.

Obsługa zdarzeń dotyczących 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 mapę, otrzymaszonGroundOverlayClick(GroundOverlay)połączenia zwrotnego.