הרכיב Place Markers (סמני מקומות)

רכיב סמני המקומות מאפשר לכם ליצור הערות מותאמות אישית במפה שמציגות מידע מרכזי על המקום ישירות במפה. אתם יכולים להציג תוכן כמו דירוג של מקום, סוג המקום, סטטוס הפתיחה או הסגירה, טווח המחירים או טקסט מותאם אישית (לדוגמה, תווית שנוצרה על ידי AI או מספר מסלול). כך המשתמשים יכולים לקבל מידע רב יותר על המפה בלי ללחוץ על כרטיס מקום מפורט.

‫ סמלים וטקסטים זמינים לסמני מיקום

אפשר להציג סמל אחד של סמן וטקסט אופציונלי של סמן לכל PlaceMarker.

הסמלים הזמינים הם:

  • ‫type: סוג המקום.
  • ‫none: אין סמל.
אלה סמני הטקסט שזמינים:
  • ‫rating: ניקוד הדירוג.
  • ‫priceRange: טווח מחירים (לדוגמה, ‎$10-20).
  • ‫openStatus: האם העסק פתוח או סגור.
  • ‫custom: טקסט בהתאמה אישית (לדוגמה, 'פופולרי').

מפנים למקום באמצעות מזהה מקום (.placeID), שם משאב (.resourceName) או קואורדינטות גיאוגרפיות (.coordinate).

דרישות לגבי הצגה ושיוך

כשסמני המפה של ערכת ממשק המשתמש של Places מוצגים, הם לא יכולים להופיע בנפרד. הם צריכים להיות אינטראקטיביים, וכשלוחצים עליהם או מקישים עליהם הם צריכים לפתוח רכיב משויך של פרטי מקום או חלון קופץ כדי לספק את המיתוג הנדרש של Google, את השיוך לתורם ואת תהליכי העבודה של 'דיווח על בעיה'.

במקרים שבהם יש מגבלות מקום, אפשר לעיין בדרישות שלנו לגבי שיוך תמונות וביקורות.

דוגמאות לשימוש ב-Place Marker

התאמה אישית בסיסית של סמנים

בדוגמה הבאה לקוד אפשר לראות התאמות אישיות בסיסיות של סמני מיקום.

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

טיפול בשיחות חוזרות

בדוגמת הקוד הבאה מוצג אופן השימוש בפונקציות קריאה חוזרת (callback) כדי לטפל בשגיאות שקשורות לעיבוד מוצלח או לנתונים חסרים.

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

בדוגמת הקוד הבאה אפשר לראות איך מטמיעים את PlaceMarker ב-SDK של מפות ל-iOS GMSMarker באמצעות מחלקת העזר PlaceMarkerHostingView כדי לעטוף את 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
}