کامپوننت نشانگرهای مکان

کامپوننت نشانگرهای مکان به شما امکان می‌دهد حاشیه‌نویسی‌های نقشه قابل تنظیمی ایجاد کنید که اطلاعات کلیدی مکان را مستقیماً روی نقشه نمایش می‌دهند. می‌توانید محتوایی مانند رتبه‌بندی مکان، نوع مکان، وضعیت باز یا بسته بودن، محدوده قیمت یا متن سفارشی (مثلاً یک برچسب تولید شده توسط هوش مصنوعی یا شماره برنامه سفر) را نمایش دهید. این کار به کاربران شما تجربه کاوش نقشه آموزنده‌تری را بدون نیاز به مراجعه به کارت مکان دقیق ارائه می‌دهد.

آیکون‌ها و متن‌های موجود برای نشانگرهای مکان

شما می‌توانید یک آیکون نشانگر و متن نشانگر اختیاری را در هر PlaceMarker نمایش دهید.

آیکون‌های موجود عبارتند از:

  • type : نوع مکان.
  • none : بدون آیکون.
نشانگرهای متن موجود عبارتند از:
  • rating : امتیاز رتبه‌بندی.
  • priceRange : محدوده قیمت (برای مثال، ۱۰ تا ۲۰ دلار).
  • openStatus : اینکه آیا یک کسب و کار باز است یا بسته.
  • custom : متن سفارشی (برای مثال، "محبوب").

با استفاده از شناسه مکان ( .placeID )، نام منبع ( .resourceName ) یا مختصات جغرافیایی ( .coordinate ) به مکان ارجاع دهید.

الزامات نمایش و انتساب

وقتی نشانگرهای نقشه Places UI Kit نمایش داده می‌شوند، نشانگرها نباید به صورت جداگانه ظاهر شوند. آنها باید تعاملی باشند و با کلیک یا لمس، یک کامپوننت یا لایت باکس جزئیات مکان مرتبط را باز کنند تا جریان‌های مورد نیاز برندسازی گوگل، انتساب مشارکت‌کننده و گزارش مشکل را ارائه دهند.

برای سناریوهایی که فضا محدود است ، به الزامات مربوط به عکس‌ها و نظرات ما مراجعه کنید.

نمونه‌های نشانگر مکان

سفارشی‌سازی‌های اولیه نشانگر

مثال کد زیر، سفارشی‌سازی‌های اولیه نشانگر مکان را نشان می‌دهد.

سویفت 

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

مدیریت فراخوانی‌های برگشتی

مثال کد زیر نحوه استفاده از callbackها را برای مدیریت خطاهای رندر موفق یا خطاهای داده‌های از دست رفته نشان می‌دهد.

سویفت 

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 نقشه‌های گوگل برای 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
}