“放置标记”组件

借助“地点标记”组件，您可以创建可自定义的地图注释，直接在地图上显示关键地点信息。您可以显示地点评分、地点类型、营业状态（营业或歇业）、价格范围或自定义文本（例如 AI 生成的标签或行程编号）等内容。这样一来，您的用户无需点按详细的地点卡片，即可获得信息更丰富的地图探索体验。

地点标记的可用图标和文字

您可以为每个 PlaceMarker 显示一个标记图标和可选的标记文本。

可用的图标包括：

  • type：地点的类型。
  • none：无图标。
可用的文本标记包括：
  • rating：评分。
  • priceRange：价格范围（例如 10-20 美元）。
  • openStatus：商家是正常营业还是停业。
  • custom：自定义文本（例如“热门”）。

使用地点 ID (.placeID)、资源名称 (.resourceName) 或地理坐标 (.coordinate) 引用相应地点。

显示和提供方信息标注要求

显示 Places UI Kit 地图标记时，标记不得单独显示。它们必须是可互动的，并且在点击或点按时打开关联的地点详情组件或 Lightbox，以提供所需的 Google 品牌宣传、贡献者署名和“举报问题”流程。

对于空间有限的情况，请参阅我们的照片和评价提供方信息要求。

放置标记示例

自定义基本标记

以下代码示例演示了基本的位置标记自定义设置。

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

自定义标记外观

以下代码示例演示了如何使用声明式 SwiftUI 视图修饰符来自定义标记外观，方法是隐藏三角形的对话气泡尖角，并提供点按回调，以便在用户点按标记时触发自定义应用操作。

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

处理回调

以下代码示例演示了如何使用回调来处理成功渲染或数据缺失错误。

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

与 Maps SDK 集成

以下代码示例演示了如何使用 PlaceMarkerHostingView 辅助类封装 PlaceMarker，从而将 PlaceMarker 嵌入到 Google Maps SDK for iOS GMSMarker 中。

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
}