Компонент «Маркеры мест»

The Place Markers component lets you create customizable map annotations that display key Place information directly on the map. You can display content such as a place's rating, place type, open or closed status, price range, or custom text (for instance, an AI-generated label or itinerary number). This provides your users with a more informative map exploration experience without requiring them to tap into a detailed place card.

Доступные значки и текст для маркеров мест.

Для каждого PlaceMarker можно отобразить один значок маркера и, при необходимости, текст маркера.

Доступные значки:

  • type : Тип места.
  • none : Нет значка.
Доступные текстовые маркеры:
  • rating : Оценка.
  • priceRange : Диапазон цен (например, 10-20 долларов).
  • openStatus : Состояние работы предприятия: открыто или закрыто.
  • custom : Пользовательский текст (например, "Популярный").

Укажите местоположение, используя идентификатор места ( .placeID ), имя ресурса ( .resourceName ) или географические координаты ( .coordinate ).

Требования к отображению и указанию авторства

При отображении маркеров на карте из Places UI Kit, они не должны отображаться изолированно. Они должны быть интерактивными и при щелчке открывать связанный компонент с подробной информацией о месте или всплывающее окно, чтобы обеспечить необходимую фирменную символику Google, указание авторства и возможность сообщить о проблеме.

Ознакомьтесь с нашими требованиями к указанию авторства фотографий и отзывов в случаях, когда место ограничено.

Примеры указателей мест

Основные настройки маркеров

Приведенный ниже пример кода демонстрирует базовые настройки маркеров мест.

Быстрый 

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

Настройка внешнего вида маркера

Приведенный ниже пример кода демонстрирует, как использовать декларативные модификаторы представления SwiftUI для настройки внешнего вида маркера, скрывая треугольный «клюв» речевого пузыря и предоставляя функцию обратного вызова для запуска пользовательских действий приложения при касании маркера пользователем.

Быстрый 

@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)")
    }
  }
}

Обработка обратных вызовов

Приведенный ниже пример кода демонстрирует, как использовать функции обратного вызова для обработки ошибок, связанных с успешным отображением данных или их отсутствием.

Быстрый 

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

Интеграция с SDK карт

Следующий пример кода демонстрирует, как встроить PlaceMarker в SDK Google Maps для iOS GMSMarker используя вспомогательный класс PlaceMarkerHostingView для обертывания PlaceMarker .

Быстрый 

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
}