Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript

Obrazy nad powierzchnią to obrazy nad powierzchnią powiązane ze współrzędnymi szerokości i długości geograficznej, dlatego przesuwają się, gdy przeciągasz lub powiększysz mapę.

Przykładowe fragmenty kodu

Repozytorium ApiDemos na GitHubie zawiera przykład przedstawiające nakładki na ziemi:

Wstęp

Nakładka na teren to zdjęcie, które jest na stałe umieszczone na mapie. W przeciwieństwie do znaczników nakładki na ziemi są zorientowane względem powierzchni Ziemi, a nie ekranu, dlatego obracanie, przechylanie lub powiększanie mapy spowoduje zmianę orientacji obrazu. Nakładki na powierzchni są przydatne, gdy chcesz poprawić pojedynczy obraz w jednym obszarze na mapie. Jeśli chcesz dodać rozległe zdjęcia obejmujące dużą część mapy, użyj nakładki z kafelkami.

Dodaj nakładkę

Aby dodać GroundOverlay, utwórz obiekt GroundOverlayOptions, który określa zarówno obraz, jak i pozycję. Możesz też określić dodatkowe ustawienia, które wpłyną na położenie obrazu na mapie. Po zdefiniowaniu niezbędnych opcji przekaż obiekt do metody GoogleMap.addGroundOverlay(), aby dodać obraz do mapy. Metoda addGroundOverlay() zwraca obiekt GroundOverlay. Jeśli chcesz go później zmienić, musisz zachować odniesienie do tego obiektu.

Krok po kroku:

  1. Utwórz instancję nowego obiektu GroundOverlayOptions
  2. Określ obraz jako BitmapDescriptor.
  3. Określ pozycję 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. Ustaw dowolne opcjonalne właściwości, takie jak transparency.
  5. Zadzwoń pod numer GoogleMap.addGroundOverlay(), aby dodać zdjęcie do mapy.

Przykład poniżej pokazuje, 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 po dodaniu do mapy obrazu naziemnego chcesz zmienić lub usunąć go, upewnij się, że obiekt GroundOverlay jest trzymany. Możesz później 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

Nakładkę podłogową możesz usunąć za pomocą metody GroundOverlay.remove().

Kotlin



imageOverlay?.remove()

      

Java


imageOverlay.remove();

      

Zmienianie nakładki

Po dodaniu obrazu nad powierzchnią do mapy możesz zmienić go za pomocą metody GroundOverlay.setImage(BitmapDescriptor).

Kotlin



// Update the GroundOverlay with a new image of the same dimension

// 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.

Ustawianie obrazu nad powierzchnią

Położenie obrazu nad powierzchnią ziemi można określić na dwa sposoby:

  • Użyj właściwości LatLng, aby wyśrodkować nakładkę, oraz wymiary w metrach, aby określić rozmiar obrazu.
  • używasz pola LatLngBounds do określania północno-wschodnich i południowo-zachodnich narożników obrazu;

Zanim dodasz nakładkę do mapy, musisz określić jej położenie.

Użyj lokalizacji do określenia pozycji obrazu

Podczas dodawania obrazu określ współrzędne geograficzne, w którym zostanie zakotwiczona, oraz szerokość nakładki (w metrach). anchor domyślnie ustawia się na środku 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 zdjęcie 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ą współrzędnych geograficznych

Podajesz plik LatLngBounds zawierający obraz. LatLngBounds wyznacza północny i południowo-zachodni narożnik obrazu. Gdy obraz jest rysowany na mapie, jest obrócony w celu dopasowania do granic. Jeśli progi nie będą zgodne z pierwotnym współczynnikiem proporcji, obraz będzie zniekształcony.

Poniższy kod umożliwia umieszczenie na mapie obrazu z południowo-zachodnim rogiem połączonym ze stroną 40.712216,-74.22655, a jego północno-wschodnim rogiem – ze stroną 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 poziomie terenu

Możesz wywołać GroundOverlay.setTag(), aby przechowywać dowolny obiekt danych z nakładką podłoża, i pobrać obiekt danych za pomocą metody GroundOverlay.getTag().

W tym przykładowym kodzie znajduje się opis ciągu tekstowego z nakładką na poziomie terenu:

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 przechowywanie i pobieranie danych przy użyciu nakładek na powierzchni jest przydatne:

  • Twoja aplikacja może obsługiwać różne nakładki na powierzchnię i chcesz, aby były one traktowane inaczej, gdy użytkownik je kliknie.
  • Być może korzystasz z systemu, który ma unikalne identyfikatory rekordów, gdzie nakładki reprezentują określone rekordy w tym systemie.
  • Dane nakładki mogą wskazywać priorytet wyznaczający kolejność jej nakładania.

Obsługa zdarzeń nakładki na ziemi

Domyślnie obrazów nad powierzchnią nie można kliknąć. Aby włączyć lub wyłączyć klikalność, wywołaj parametr GroundOverlay.setClickable(boolean).

Aby wykrywać zdarzenia kliknięć w klikalnej nakładki na ziemi, użyj obiektu OnGroundOverlayClickListener. Aby ustawić ten detektor na mapie, zadzwoń pod numer GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener). Gdy użytkownik kliknie nakładkę na ziemi, otrzymasz wywołanie zwrotne onGroundOverlayClick(GroundOverlay).