Nakładki na powierzchnię

Wybierz platformę: Android iOS JavaScript

Nakładki na powierzchni to obrazy powiązane z szerokością i długością geograficzną. współrzędnych, dzięki czemu poruszają się one podczas przeciągania lub powiększania mapy.

Przykładowe fragmenty kodu

Repozytorium API Apigee na GitHubie zawiera przykład ilustrujący obrazy nad powierzchnią:

Wprowadzenie

Nakładka na powierzchni to obraz na stałe umieszczony na mapie. W przeciwieństwie do znaczników podstawa Są one zorientowane względem powierzchni Ziemi, a nie ekranu. obracanie, przechylanie lub powiększanie mapy zmieni orientację zdjęcia. Nakładki na powierzchni są przydatne, gdy chcesz poprawić pojedynczy obraz w jednym mapę. Jeśli chcesz dodać obszerne zdjęcia obejmujące znaczną część rozważ użycie nakładki z kafelkami.

Dodaj nakładkę

Aby dodać GroundOverlay, utwórz GroundOverlayOptions, który definiuje obrazu i pozycji. Opcjonalnie możesz określić dodatkowe ustawienia, które na pozycję zdjęcia na mapie. Po zdefiniowaniu parametru niezbędnych opcji, przekaż obiekt do GoogleMap.addGroundOverlay() aby dodać zdjęcie do mapy. Metoda addGroundOverlay() zwraca błąd GroundOverlay; należy zachować odniesienie możesz go zmodyfikować później.

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 GoogleMap obiekt.

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 mapę, pamiętaj o utrzymaniu obiektu GroundOverlay. Dostępne opcje później modyfikować 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ę z ziemią, GroundOverlay.remove().

Kotlin



imageOverlay?.remove()

Java


imageOverlay.remove();

Zmienianie nakładki

Możesz zmienić obraz nakładki na ziemi po dodaniu do mapy za pomocą metodę 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 przedstawiającym te same wymiary.

Umieszczanie obrazu nad powierzchnią

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

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

Przed dodaniem nakładki na ziemię do mapy.

Pozycjonowanie obrazu na podstawie lokalizacji

Dodając obraz, określasz współrzędne geograficzne, do której zostanie stała kotwica. oraz szerokość nakładki (w metrach). anchor domyślnie znajduje się na środku . Opcjonalnie można podać wysokość nakładki (w metrach). Jeśli nie podasz wysokości nakładki, zostanie ona automatycznie obliczone w celu zachowania proporcji obrazu.

Poniższy kod umieszcza obraz na pozycji 40.714086, -74.228697 który ma 8,6 km szerokości i 6,5 km wysokości. 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 wyznacza północny wschód i południowy zachód rogów obrazu. Kiedy obraz narysowany na mapie zostanie obrócony w celu dopasowania do granic. Jeśli nie będą pasować do pierwotnego formatu obrazu, obraz zostanie przekrzywiony.

Poniższy kod umieszcza na mapie obraz, którego rogiem południowo-zachodnim jest Miejsce 40.712216,-74.22655 i jego północno-wschodni róg powiązane z 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 zadzwonić pod numer GroundOverlay.setTag(), aby zapisać dowolnego obiektu danych z nakładką naziemną i pobierać dane, 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 przechowywanie i pobieranie danych może okazać się przydatne za pomocą nakładek na powierzchnię:

  • Twoja aplikacja może obsługiwać różne nakładki na powierzchni, traktuje je inaczej, gdy użytkownik je klika.
  • Być może korzystasz z systemu z unikalnymi identyfikatorami rekordów, w których nakładki reprezentują określone rekordy w tym systemie.
  • Dane nakładki mogą wskazywać priorytet określający z-index dla nakładkę.

Obsługa zdarzeń nakładki na ziemię

Domyślnie warstwy nad powierzchnią są nieklikalny. Aby włączyć lub wyłączyć klikalność, wywołaj GroundOverlay.setClickable(boolean)

Użyj OnGroundOverlayClickListener aby nasłuchiwać zdarzeń kliknięcia na klikalnej nakładce powierzchni. Aby włączyć ten detektor mapa, telefon GoogleMap.setOnGroundOverlayClickListener(OnGroundOverlayClickListener) Gdy użytkownik kliknie nakładkę na powierzchnię ziemi, otrzymasz onGroundOverlayClick(GroundOverlay) oddzwonienie.