تصميم خريطة

اختيار النظام الأساسي: نظام التشغيل Android iOS JavaScript

يصف هذا الدليل الطرق التي يمكنك من خلالها تصميم الخريطة في تطبيق iOS عند متابعة رحلة.

قبل البدء

قبل تصميم خريطة، يجب أن يكون لديك تطبيق للمستهلك تنفيذ الأشياء التالية:

• عرض الخريطة راجع تهيئة عرض الخريطة.

• طريقة للتعامل مع أحداث عرض الخريطة. عرض التعامل مع أحداث عرض الخريطة

عليك أيضًا إعداد خدمات الخلفية التي تحتاجها حزمة Consumer SDK، وإعداد حزمة Consumer SDK. لمعرفة التفاصيل، يُرجى الاطّلاع على إعداد حزمة تطوير البرامج (SDK) للمستهلكين. وما هو Fleet Engine؟

تخصيصات الخريطة

في ما يلي التخصيصات المتوفرة:

• تصميم الخريطة: يمكنك اختيار تصميم ألوان الخريطة وخطوط متعددة وغيرها من ميزات الخريطة. باستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية راجع تصميم الخريطة.

• ضبط مستوى التكبير أو التصغير في الكاميرا: يمكنك استخدام الميزة المدمجة أو إعداد الميزة الخاصة بك خيارات الكاميرا للتركيز في رحلة. عرض ضبط مستوى التكبير أو التصغير في الكاميرا للتركيز في رحلة

• تخصيص العلامات والخطوط المتعددة: يمكنك إضافة علامات مخصّصة ومسار الخطوط المتعددة إلى تصميم تطبيقك. تتيح عناصر التصميم هذه لتطبيق Consumer عرض معاينة ديناميكية لمسار المركبة. اطّلِع على مقالتَي تخصيص العلامات وتخصيص الخطوط المتعددة.

  توفّر حزمة تطوير البرامج (SDK) هذه الخيارات من خلال السمة consumerMapStyleCoordinator . يتوفّر هذا الموقع من خلال فئة GMTCMapView.

صمِّم الخريطة باستخدام تصميم الخرائط المستنِد إلى السحابة الإلكترونية

يمكنك تخصيص شكل مكوّن الخرائط ومظهره باستخدام ميزة "تصميم الخرائط" المستندة إلى السحابة الإلكترونية. يمكنك إنشاء أنماط الخرائط وتعديلها في Google Cloud Console لأي من تطبيقاتك التي تستخدم خرائط Google، دون الحاجة إلى إجراء أي تغييرات على الرمز. لمزيد من المعلومات، يُرجى مراجعة تصميم الخرائط المستندة إلى السحابة الإلكترونية:

يتم تحديث ConsumerMapView و ConsumerMapFragment تتيح الفئات تصميم الخرائط المستند إلى السحابة الإلكترونية. لاستخدام ميزة تصميم الخرائط المستندة إلى السحابة الإلكترونية، تأكَّد من أنّ LATEST هو مُنشئ LATEST الذي تم اختياره. تعرض الأقسام التالية أمثلة على كيفية استخدام هذه الصفحة. تصميم الخرائط عبر السحابة الإلكترونية من خلال مشروعك.

ConsumerMapView

لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية في ConsumerMapView، يجب ضبط الحقل mapId على GoogleMapOptions وتمرير GoogleMapOptions إلى getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) أو getConsumerGoogleMapAsync(ConsumerMapPaymentCallback, FragmentActivity, GoogleMapOptions)

مثال

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

هناك طريقتان لاستخدام تصميم الخرائط المستند إلى السحابة في ConsumerMapFragments:

• استخدام ملف XML بشكل ثابت
• ديناميكيًا باستخدام newInstance

بشكل ثابت باستخدام XML

لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية بتنسيق XML في ConsumerMapFragment، أضِف سمة XML map:mapId مع السمة المحدّدة mapId انظر المثال التالي:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

ديناميكيًا باستخدام newInstance

لاستخدام تصميم الخرائط المستندة إلى السحابة الإلكترونية مع newInstance في ConsumerMapFragment، اضبط الحقل mapId على GoogleMapOptions وأرسِل GoogleMapOptions إلى newInstance. انظر المثال التالي:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

ضبط تكبير/تصغير الكاميرا للتركيز في رحلة

أثناء جلسة مشاركة الرحلة النشطة، من المفيد للمستخدم أن يرى رؤية أكبر للمركبة طوال رحلتها بدلاً من لقطة مقرّبة من منظور المركبة على الطريق. للقيام بذلك، يمكنك ضبط تكبير/تصغير الكاميرا باستخدام تطبيق AutoCamera المدمَج أو من خلال تخصيص سلوك الكاميرا بنفسك على النحو التالي:

• AutoCamera: إذا كنت تريد استخدام AutoCamera، ليس لديك للقيام بأي شيء. تتتبّع الكاميرا الرحلة تلقائيًا.

• تخصيص سلوك الكاميرا: لتخصيص سلوك الكاميرا، يجب إيقاف AutoCamera ثم إجراء عمليات التخصيص.

توسيط الكاميرا بشكل تلقائي من خلال ميزة "AutoCamera"

توفّر حزمة تطوير البرامج (SDK) الخاصة بالمستهلك ميزة "AutoCamera" التي يتم تفعيلها تلقائيًا. على زر موقعي المضمن في SDK للخرائط. تكبِّر الكاميرا لعرض التركيز على مسار مشاركة الرحلة ونقطة طريق الرحلة التالية.

إذا أردت استخدام AutoCamera، تأكَّد من أنّه مفعَّل. لمزيد من التفاصيل، يُرجى مراجعة allowCameraAutoUpdate

للحصول على تفاصيل عن زر موقعي لحزمة تطوير البرامج (SDK) للخرائط، راجع زر موقعي في وثائق حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل iOS.

تخصيص سلوك الكاميرا

لمزيد من التحكّم في سلوك الكاميرا، يمكنك إيقاف AutoCamera تخصيص سلوك الكاميرا.

يمكنك إيقاف أو تفعيل ميزة AutoCamera باستخدام AllowCameraAutoUpdate الموقع.

لمزيد من عمليات تخصيص الكاميرا، يُرجى الاطّلاع على تحريك الكاميرا في مستندات حزمة تطوير البرامج (SDK) لتطبيق "خرائط Google" لنظام التشغيل iOS.

الخطوات التالية

متابعة رحلة في نظام التشغيل iOS