مكوّن "علامات الأماكن"

يتيح لك مكوّن "علامات الأماكن" إنشاء تعليقات توضيحية مخصّصة على الخريطة تعرض معلومات أساسية عن الأماكن مباشرةً على الخريطة. يمكنك عرض محتوى مثل تقييم مكان أو نوعه أو حالة فتحه أو إغلاقه أو النطاق السعري أو نص مخصّص (على سبيل المثال، تصنيف من إنشاء الذكاء الاصطناعي أو رقم خط سير الرحلة). يوفّر ذلك للمستخدمين تجربة استكشاف أكثر إفادةً على الخريطة بدون الحاجة إلى النقر على بطاقة مكان مفصّلة.

توفّر الرموز والنصوص المتاحة لعلامات الأماكن

يمكنك عرض رمز علامة واحد ونص علامة اختياري لكل PlaceMarker.

في ما يلي الرموز المتاحة:

  • ‫type: تمثّل هذه السمة نوع المكان.
  • ‫none: لا يوجد رمز.
في ما يلي علامات النص المتاحة:
  • ‫rating: نتيجة التقييم.
  • priceRange: نطاق السعر (على سبيل المثال، 10-20 دولار أمريكي)
  • ‫openStatus: ما إذا كان النشاط التجاري مفتوحًا أو مغلقًا
  • ‫custom: نص مخصّص (على سبيل المثال، "رائج").

يمكنك الإشارة إلى المكان باستخدام رقم تعريف المكان (.placeID) أو اسم المرجع (.resourceName) أو الإحداثيات الجغرافية (.coordinate).

متطلبات العرض وتحديد المصدر

عند عرض محدّدات الخريطة في حزمة أدوات "خرائط Google" الجاهزة للأماكن، يجب ألا تظهر محدّدات الخريطة بشكل منفصل. يجب أن تكون تفاعلية وتفتح "مكوّن تفاصيل المكان" أو "صندوق الإضاءة" المرتبط عند النقر أو اللمس لتوفير العلامة التجارية المطلوبة من 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)")
      }
    }
  }
}

دمج حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google"

يوضّح مثال الرمز البرمجي التالي كيفية تضمين PlaceMarker في GMSMarker ضمن حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" للتطبيقات المتوافقة مع iOS باستخدام فئة الأداة المساعدة 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
}