Komponent Znaczniki miejsc

Komponent Place Markers umożliwia tworzenie dostosowywanych adnotacji na mapie, które wyświetlają kluczowe informacje o miejscu bezpośrednio na mapie. Możesz wyświetlać treści takie jak ocena miejsca, typ miejsca, stan (otwarte lub zamknięte), przedział cenowy lub tekst niestandardowy (np. wygenerowana przez AI etykieta lub numer planu podróży). Dzięki temu użytkownicy mogą uzyskać więcej informacji o mapie bez konieczności klikania szczegółowej karty miejsca.

Dostępne ikony i tekst dla znaczników miejsc

Możesz wyświetlić 1 ikonę znacznika i opcjonalny tekst znacznika dla każdego elementu PlaceMarker.

Dostępne ikony:

  • type: typ miejsca.
  • none: brak ikony.
Dostępne znaczniki tekstu:
  • rating: ocena.
  • priceRange: przedział cenowy (np. 10–20 zł).
  • openStatus: czy firma jest otwarta czy zamknięta.
  • custom: tekst niestandardowy (np. „POPULAR”).

Odwołaj się do miejsca, używając identyfikatora miejsca (.placeID), nazwy zasobu (.resourceName) lub współrzędnych geograficznych (.coordinate).

Wymagania dotyczące wyświetlania i podawania źródła

Gdy wyświetlane są znaczniki mapy z interfejsu Places UI Kit, nie mogą one pojawiać się pojedynczo. Muszą być interaktywne i po kliknięciu lub dotknięciu otwierać powiązany komponent informacji o miejscu lub lightbox, aby zapewnić wymagany branding Google, informację o pochodzeniu danych o współtwórcy i proces zgłaszania problemu.

W przypadku ograniczonej przestrzeni zapoznaj się z naszymi wymaganiami dotyczącymi atrybucji zdjęć i opinii.

Przykłady znacznika miejsca

Podstawowe dostosowywanie znaczników

Poniższy przykład kodu pokazuje podstawowe dostosowania znacznika miejsca.

Swift

import GooglePlacesSwift
import SwiftUI

@MainActor
struct DefaultMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
    )
  }
}

@MainActor
struct RatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .rating
    )
  }
}

@MainActor
struct TypeAndRatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .type,
      markerText: .rating
    )
  }
}


@MainActor
struct PriceRangeMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME"),
      markerIcon: .none,
      markerType: .priceRange
    )
  }
}


@MainActor
struct OpenStatusMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.coordinate(CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)),
      markerIcon: .icon,
      markerText: .openStatus
    )
  }
}
@MainActor
struct PhotoMarker: View {
    PlaceMarker(
        identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME")
        markerIcon =.Photo
    )
}


@MainActor
struct CustomMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerType: .custom(label: "3")
    )
  }
}

Dostosowywanie wyglądu znacznika

Poniższy przykład kodu pokazuje, jak za pomocą deklaratywnych modyfikatorów widoku SwiftUI dostosować wygląd znacznika, ukrywając trójkątny element dymku i zapewniając wywołanie zwrotne po kliknięciu, aby uruchamiać niestandardowe działania aplikacji, gdy użytkownik kliknie znacznik.

Swift

@MainActor
struct ModifierStyleMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: .placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .openStatus,
      configuration: PlaceMarkerConfiguration(beakPresence: false)
    )
    .onTap { placeID in
      print("Marker tapped for place: \(placeID)")
    }
  }
}

Obsługa wywołań zwrotnych

Poniższy przykład kodu pokazuje, jak używać wywołań zwrotnych do obsługi błędów związanych z prawidłowym renderowaniem lub brakiem danych.

Swift

import GooglePlacesSwift
import SwiftUI


@MainActor
struct StatusHandlingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
      markerText: .priceRange,
    )
    /// Triggered when place data is successfully fetched or when data fetching fails or 
    /// required data is missing for the place..
    .onLoad { result in
        if let place = result.place {
          print("Marker successfully loaded for place ID: \(place.placeID)")
        } else if let error = result.error {
          print("Failed to load marker: \(error)")
      }
    }
  }
}

Integracja z pakietem Maps SDK

Ten przykład kodu pokazuje, jak umieścić PlaceMarker w GMSMarker pakietu Google Maps SDK na iOS za pomocą klasy pomocniczej PlaceMarkerHostingView, która otacza PlaceMarker.

Swift

import GoogleMaps
import GooglePlacesSwift
import SwiftUI
import UIKit


func addPlaceMarker(to mapView: GMSMapView, placeID: String) {
  let marker = GMSMarker()
  let markerView = PlaceMarker(
    identifier: .placeID(placeID),
    markerType: .rating(showIcon: true),
  ).onLoad { result in
    switch Result
    case .success(let place)
      marker.position = place.coordinate
    case .error(let error) {
      print("Failed to load marker: \(error)")
    }
  }

  marker.iconView = PlaceMakerHostingView(markerView)
  marker.map = mapView
}