Nakładki na powierzchnię

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Nakładki naziemne to nakładki graficzne powiązane ze współrzędnymi szerokości i długości geograficznej, które można przesuwać, gdy przeciągasz lub powiększasz mapę.

Przykładowe fragmenty kodu

Repozytorium ApiDemos w GitHubie zawiera próbkę, która pokazuje nakładki na powierzchni:

Wprowadzenie

Nakładka na poziomie terenu to obraz na stałe osadzony na mapie. W odróżnieniu od znaczników, nakładki na powierzchni są kierowane na powierzchnię Ziemi, a nie na ekranie, dlatego obrót, przechylenie lub powiększenie mapy spowoduje zmianę orientacji obrazu. Nakładki naziemne są przydatne, gdy chcesz poprawić pojedynczy obraz w jednym miejscu na mapie. Jeśli chcesz dodać szerokie obrazy przedstawiające dużą część mapy, rozważ użycie nakładki z kafelkami.

Dodawanie nakładki

Aby dodać element GroundOverlay, utwórz obiekt GroundOverlayOptions, który określa zarówno obraz, jak i pozycję. Opcjonalnie możesz określić dodatkowe ustawienia wpływające 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 zmodyfikować go później, musisz zachować odwołanie do tego obiektu.

Krok po kroku:

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

Poniższy przykład pokazuje, jak dodać nakładkę naziemną do istniejącego obiektu GoogleMap.

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);

      

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)

      

Jeśli chcesz zmienić lub usunąć nakładkę na powierzchnię po dodaniu jej do mapy, pamiętaj, aby trzymać obiekt GroundOverlay. Możesz ją modyfikować później, wprowadzając zmiany w tym obiekcie.

Java


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

      

Kotlin


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

      

Usuwanie nakładki

Nakładka na poziomie terenu możesz usunąć metodą GroundOverlay.remove().

Java


imageOverlay.remove();

      

Kotlin


imageOverlay?.remove()

      

Zmiana nakładki

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

Java


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

      

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

      

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

Umiejscowienie obrazu nad powierzchnią

Położenie warstwy ziemi można określić na 2 sposoby:

  • Zmienna LatLng jest wyśrodkowana dla nakładki, a wymiary w metrach pozwalają określić rozmiar obrazu.
  • Atrybut LatLngBounds pozwala określić północno-wschodni i południowy zachód od obrazu.

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

Użyj lokalizacji, aby ustawić obraz

Podczas dodawania obrazu określasz długość i szerokość geograficzną miejsca, do którego zostanie osadzony kotwica, oraz szerokość nakładki (w metrach). anchor to środek obrazu. Opcjonalnie możesz podać wysokość nakładki (w metrach). Jeśli nie określisz wysokości nakładki, zostanie ona automatycznie obliczona, aby zachować proporcje obrazu.

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

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);

      

Kotlin


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

      

Pozycjonowanie obrazu przy użyciu LatLngBounds

Musisz podać wartość LatLngBounds zawierającą obraz. LatLngBounds ustawia północny wschód i południowy zachód od obrazu. Po narysowaniu obrazu na mapie zostanie on obrócony tak, aby mieścił się w granicach. Jeśli granice nie będą różnić się od oryginalnego formatu obrazu, obraz zostanie zniekształcony.

Podany niżej kod umieszcza obraz na mapie, a jego narożnik południowy wschód jest powiązany z miejscem 40.712216,-74.22655, a jego północno-wschodnią częścią – 40.773941, -74.12544.

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);

      

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)

      

Powiązanie danych z nakładką gruntu

Możesz wywołać metodę GroundOverlay.setTag(), aby zapisać dowolny obiekt danych z nawierzchnią i pobrać obiekt danych za pomocą metody GroundOverlay.getTag().

Ten przykładowy kod przechowuje opis ciągu znaków z nawierzchnią:

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");

      

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"

      

Oto kilka przykładów scenariuszy, w których przydaje się zapisywanie i pobieranie danych z nakładkami gruntowymi:

  • Aplikacja może zaspokajać różne potrzeby związane z nakładkami gruntowymi. Gdy będziesz ją klikać, musisz traktować je inaczej.
  • Być może korzystasz z systemu, który ma unikalne identyfikatory rekordów, gdzie nakładki reprezentują konkretne rekordy w tym systemie.
  • Dane nakładki mogą wskazywać priorytet określania kolejności nakładania elementów.

Obsługa zdarzeń nakładki na powierzchni

Domyślnie nakładek na ziemi nie można kliknąć. Możesz włączyć lub wyłączyć klikalność, wywołując interfejs GroundOverlay.setClickable(boolean).

Aby nasłuchiwać zdarzeń kliknięcia na nakładanej powierzchni, kliknij OnGroundOverlayClickListener. Aby ustawić ten odbiornik na mapie, wywołaj GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener). Gdy użytkownik kliknie nakładkę na powierzchni ziemi, otrzymasz wywołanie zwrotne onGroundOverlayClick(GroundOverlay).