تصميم خريطة

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

للحصول على تفاصيل حول زر موقعي الجغرافي، يُرجى الاطّلاع على زر "موقعي الجغرافي" في مستندات Maps JavaScript API.

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

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

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

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

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

   • GoogleMap.moveCamera()

   • ‫GoogleMap.animateCamera()

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

تتبُّع رحلة في Android