تصميم خريطة

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

يوضّح هذا الدليل الطرق التي يمكنك من خلالها تخصيص الخريطة المعروضة في تطبيق Android عند تتبُّع رحلة. يمكنك تخصيص شكل الخريطة وأسلوبها بالطرق التالية:

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

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

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

تتيح كلتا الفئتَين ConsumerMapView و ConsumerMapFragment تصميم الخرائط المستنِد إلى السحابة الإلكترونية. لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية، تأكد من أن الخرائط قيمة العارض 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، احرص على تفعيله. لمزيد من التفاصيل، يُرجى مراجعة isAutoCameraEnabled

للحصول على تفاصيل حول زر موقعي، راجع زر موقعي في وثائق واجهة برمجة تطبيقات JavaScript للخرائط.

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

لمزيد من التحكّم في سلوك الكاميرا، اتّبِع الخطوات التالية لإيقافها يمكنك AutoCamera وتخصيص سلوك الكاميرا يدويًا.

1. أوقِف AutoCamera باستخدام ConsumerController.setAutoCameraEnabled().

2. يمكنك الحصول على حدود الكاميرا المقترَحة باستخدام ConsumerController.getCameraUpdate().

3. يمكنك تقديم CameraUpdate كوسيطة لإحدى دوال Android التالية:

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

متابعة رحلة في Android