تصميم خريطة

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

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

قبل البدء

قبل تصميم خريطة، يجب أن يكون لديك تطبيق للمستهلكين يتضمّن ما يلي:

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

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

في ما يلي عمليات التخصيص المتاحة:

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

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

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

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

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

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

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

ConsumerMapView

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

مثال

جافا

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. انظر المثال التالي:

جافا

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 التي يتم تفعيلها تلقائيًا على زر موقعي الجغرافي المضمّن في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google". تُكبِّر الكاميرا الصورة للتركيز على مسار الرحلة والنقطة التالية على المسار.

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

‫`AutoCamera`

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

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

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

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

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

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

متابعة رحلة على أجهزة iOS