تصميم خريطة

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

يوضّح هذا الدليل الطرق التي يمكنك من خلالها تصميم الخريطة التي تظهر في تطبيقك المتوافق مع نظام التشغيل iOS عند تتبُّع رحلة.

قبل البدء

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

• عرض الخريطة راجِع إعداد وضع الخريطة.

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

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

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

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

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

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

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

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

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

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

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

ConsumerMapView

لاستخدام تنسيق الخرائط المستندة إلى السحابة الإلكترونية في ConsumerMapView، اضبط الحقل mapId على GoogleMapOptions وأرسِل GoogleMapOptions إلى getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) أو getConsumerGoogleMapAsync(ConsumerMapReadyCallback, 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"

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

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

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

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

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

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

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

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

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