Thành phần Điểm đánh dấu vị trí

Thành phần Điểm đánh dấu địa điểm cho phép bạn tạo chú thích có thể tuỳ chỉnh cho bản đồ để hiển thị thông tin chính về Địa điểm ngay trên bản đồ. Bạn có thể hiển thị nội dung như điểm xếp hạng, loại địa điểm, trạng thái mở hoặc đóng cửa, khoảng giá hoặc văn bản tuỳ chỉnh của một địa điểm (ví dụ: nhãn do AI tạo hoặc số hành trình). Điều này giúp người dùng khám phá bản đồ một cách hiệu quả hơn mà không cần nhấn vào thẻ địa điểm chi tiết.

Biểu tượng và văn bản có sẵn cho điểm đánh dấu

Bạn có thể hiển thị một biểu tượng điểm đánh dấu và văn bản điểm đánh dấu (không bắt buộc) cho mỗi PlaceMarker.

Các biểu tượng có sẵn là:

  • type: Loại địa điểm.
  • none: Không có biểu tượng.
Các điểm đánh dấu văn bản hiện có là:
  • rating: Điểm xếp hạng.
  • priceRange: Khoảng giá (ví dụ: 10 – 20 USD).
  • openStatus: Doanh nghiệp có đang mở cửa hay không.
  • custom: Văn bản tuỳ chỉnh (ví dụ: "PHỔ BIẾN").

Tham chiếu địa điểm bằng Mã địa điểm (.placeID), tên tài nguyên (.resourceName) hoặc toạ độ địa lý (.coordinate).

Yêu cầu về việc hiển thị và ghi công

Khi các điểm đánh dấu trên bản đồ trong Places UI Kit xuất hiện, các điểm đánh dấu này không được xuất hiện riêng lẻ. Các thành phần này phải có tính tương tác và mở một Thành phần chi tiết về địa điểm hoặc Hộp đèn được liên kết khi người dùng nhấp hoặc nhấn để cung cấp thông tin bắt buộc về thương hiệu của Google, thông tin ghi nhận đóng góp và quy trình Báo cáo vấn đề.

Hãy xem các yêu cầu về việc ghi công ảnh và bài đánh giá trong trường hợp không gian bị hạn chế.

Ví dụ về điểm đánh dấu

Tuỳ chỉnh điểm đánh dấu cơ bản

Ví dụ về mã sau đây minh hoạ các chế độ tuỳ chỉnh cơ bản cho điểm đánh dấu vị trí.

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

Tuỳ chỉnh giao diện của điểm đánh dấu

Ví dụ về mã sau đây minh hoạ cách sử dụng các đối tượng sửa đổi khung hiển thị SwiftUI khai báo để tuỳ chỉnh giao diện của điểm đánh dấu bằng cách ẩn mỏ ô lời thoại hình tam giác và cung cấp một lệnh gọi lại thao tác nhấn để kích hoạt các Hành động trong ứng dụng tuỳ chỉnh khi người dùng nhấn vào điểm đánh dấu.

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

Xử lý lệnh gọi lại

Ví dụ về mã sau đây minh hoạ cách sử dụng lệnh gọi lại để xử lý lỗi dữ liệu bị thiếu hoặc lỗi kết xuất thành công.

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

Tích hợp với Maps SDK

Ví dụ về mã sau đây minh hoạ cách nhúng PlaceMarker trong SDK bản đồ dành cho iOS GMSMarker của Google Maps bằng cách sử dụng lớp trợ giúp PlaceMarkerHostingView để bao bọc 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
}