تصميم خريطة

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

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

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

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

قم بتخصيص شكل ومظهر مكوِّن الخرائط باستخدام تصميم الخرائط المستند إلى السحابة. يمكنك إنشاء أنماط الخرائط وتعديلها في 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 تضع الكاميرا في المنتصف

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

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

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

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

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

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

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

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

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

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

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