تصميم خريطة

اختيار النظام الأساسي: 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، أضِف السمة map:mapId بتنسيق XML مع الـ 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