Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript

Nakładki na powierzchni to obrazy powiązane ze współrzędnymi szerokości i długości geograficznej, więc przesuwają się podczas przeciągania lub powiększania mapy.

Przykładowe fragmenty kodu

Repozytorium API Apigee na GitHubie zawiera przykład, który ilustruje obrazy nad powierzchnią:

Wstęp

Nakładka na powierzchni to obraz na stałe umieszczony na mapie. 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 powierzchni są przydatne, gdy chcesz poprawić pojedynczy obraz w jednym obszarze mapy. Jeśli chcesz dodać obszerne zdjęcia obejmujące dużą część mapy, rozważ użycie nakładki z kafelkami.

Dodaj nakładkę

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 będą miały wpływ na pozycję 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 zmodyfikować, zachowaj odniesienie do tego obiektu.

Krok po kroku:

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

Poniższy przykład pokazuje, jak dodać nakładkę na powierzchnię 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ę na powierzchni po dodaniu jej do mapy, pamiętaj, aby zatrzymać obiekt GroundOverlay. Możesz zmodyfikować nakładkę później, 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ę z podłożem za pomocą metody GroundOverlay.remove().

Kotlin



imageOverlay?.remove()

Java


imageOverlay.remove();

Zmienianie nakładki

Po dodaniu do mapy obrazu nakładki na ziemi możesz zmienić 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.

Umieszczanie obrazu nad powierzchnią

Istnieją 2 sposoby określania pozycji obrazu nad powierzchnią:

  • Użyj LatLng do wyśrodkowania nakładki, a wymiarów w metrach określamy w celu określenia rozmiaru obrazu.
  • Użyj LatLngBounds do określenia północnego wschodu i południowego zachodniego narożnika obrazu.

Przed dodaniem nakładki do mapy musisz określić jej położenie.

Pozycjonowanie obrazu na podstawie lokalizacji

Dodając obraz, określasz współrzędne geograficzne, do którego zostanie stałe zakotwiczone, oraz szerokość nakładki (w metrach). Domyślnie anchor znajduje się na środku obrazu. Opcjonalnie można 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 podać element LatLngBounds zawierający obraz. LatLngBounds ustawia północny wschód i południowy zachód rogów obrazu. Gdy obraz zostanie narysowany na mapie, zostanie obrócony, by dopasować go do granic. Jeśli granice nie będą pasować do pierwotnego formatu obrazu, obraz będzie przekrzywiony.

Poniższy kod umieszcza na mapie obraz, którego rogi południowo-zachodnie krawędzie są powiązane z polem 40.712216,-74.22655 i północno-wschodnim krawędzią 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ć metodę GroundOverlay.setTag(), aby zapisać dowolny obiekt danych z nakładką naziemną, i pobrać obiekt danych za pomocą GroundOverlay.getTag().

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

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:

  • Twoja aplikacja może obsługiwać różne nakładki na teren i chcesz, aby były one traktowane inaczej po kliknięciu przez użytkownika.
  • Być może korzystasz z systemu z unikalnymi identyfikatorami rekordów, gdzie nakładki reprezentują określone rekordy w tym systemie.
  • Dane nakładki mogą wskazywać priorytet określający kolejność nakładania elementów.

Obsługa zdarzeń nakładki na ziemię

Domyślnie nie można klikać nakładek na powierzchnię. Aby włączyć lub wyłączyć klikalność, wywołaj GroundOverlay.setClickable(boolean).

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