إعداد خريطة

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

لمتابعة رحلة في تطبيق المستهلك، عليك أولاً تحديد خريطة وإضافة دعم للخرائط المتّجهة، إذا لزم الأمر.

لإعداد خريطة في تطبيقك، اتّبِع الخطوات التالية:

1. حدِّد جزء خريطة لمتابعة رحلة.
2. أضِف دعمًا لطبقة أساسية في الخرائط ووحدة التحكّم في العرض.
3. أضِف دعمًا للرسومات المتّجهة على Android لعرض الخرائط المتّجهة ، إذا لزم الأمر.

بعد تحديد خريطة، يمكنك إضافة طرق عرض إضافية وعناصر التحكّم في الكاميرا لتخصيص التجربة المرئية. لمزيد من التفاصيل، اطّلِع على مقالة تخصيص نمط الخريطة.

الخطوة 1: تحديد جزء خريطة لمتابعة رحلة

يمكنك تحديد خريطة من خلال إضافة جزء خريطة أو طريقة عرض لإنشاء الخريطة التي تشارك فيها رحلة عند الطلب في تطبيق المستهلك. لتحديد الخريطة، اتّبِع إحدى الطريقتَين التاليتَين:

• ConsumerMapFragment: استخدِم هذا الخيار لتحديد خريطتك باستخدام Fragment.

• ConsumerMapView: استخدِم هذا الخيار لتحديد خريطة باستخدام View.

الميزات هي نفسها في كلتا الطريقتَين، لذا اختَر الطريقة الأفضل لتطبيقك.

يتم شرح كلتا الطريقتَين بمزيد من التفصيل في القسم التالي.

إضافة جزء خريطة أو طريقة عرض

لإنشاء خريطة لعرض مدى تقدّم الرحلة باستخدام جزء Android أو طريقة عرض، اتّبِع الخطوات التالية واطّلِع على أمثلة الرموز البرمجية.

1. حدِّد جزءًا أو طريقة عرض في ملف XML لتنسيق تطبيقك، والذي يقع في /res/layout. حدِّد خريطة الرحلة كجزء باستخدام ConsumerMapFragment أو كطريقة عرض باستخدام ConsumerMapView.

   يوفّر الجزء أو طريقة العرض بعد ذلك إمكانية الوصول إلى خريطة الرحلة التي يمكن لتطبيقك الوصول إليها وتعديلها. توفّر الخريطة أيضًا مقبضًا لـ ConsumerController، ما يسمح لتطبيقك بالتحكّم في تجربة المستهلك وتخصيصها.

2. من طريقة onCreate()، استدعِ الدالة getConsumerGoogleMapAsync(callback)، التي تعرض ConsumerGoogleMap بشكل غير متزامن في معاودة الاتصال.

3. استخدِم ConsumerGoogleMap لعرض مدى تقدّم الرحلة وتعديلها حسب الحاجة.

   ملاحظة: يمكنك الوصول إلى ConsumerController من ConsumerGoogleMap باستخدام getConsumerController().

مثال على كيفية إضافة ConsumerMapFragment

1. حدِّد الجزء في ملف XML لتنسيق تطبيقك، كما هو موضّح في مثال الرمز البرمجي التالي.

   <fragment
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
       android:id="@+id/consumer_map_fragment"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

2. استدعِ الدالة getConsumerGoogleMapAsync() من طريقة onCreate().

جافا

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

مثال على كيفية إضافة ConsumerMapView

1. استخدِم طريقة العرض في جزء أو في نشاط، كما هو محدّد في ملف XML.

    <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/consumer_map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   

2. استدعِ الدالة getConsumerGoogleMapAsync() من onCreate(). بالإضافة إلى مَعلمة معاودة الاتصال، أدرِج التفاصيل التالية:

   • النشاط أو الجزء الذي يحتوي على طريقة العرض يجب أن يكون الصنف الأساسي للنشاط أو الجزء إما FragmentActivity أو Fragment (على التوالي)، لأنّهما يوفّران إمكانية الوصول إلى دورة حياته.

   • GoogleMapOptions (يمكن أن تكون قيمة فارغة)، التي تحتوي على سمات الإعدادات لـ MapView.

جافا

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

إنّ MapView في جزء هي نفسها في المثال السابق لـ MapView في نشاط، باستثناء أنّ الجزء يوسّع التنسيق الذي يتضمّن MapView في طريقة onCreateView() للجزء.

جافا

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

الخطوة 2: إضافة دعم لطبقة أساسية في الخرائط ووحدة التحكّم في العرض

لمشاركة مدى تقدّم الرحلة في تطبيقك، أضِف الفئتَين التاليتَين إلى تطبيقك: ConsumerGoogleMap وConsumerController.

• احصل على ConsumerGoogleMap من ConsumerMapFragment أو ConsumerMapView، وكلتاهما تعرضان ConsumerGoogleMap بشكل غير متزامن في ConsumerMapReadyCallback.

  ConsumerGoogleMap هي فئة تغليف للفئة GoogleMap. تستخدِم واجهة برمجة تطبيقات مكافئة لـ GoogleMap حتى يتمكّن تطبيقك من التفاعل مع الخريطة. بهذه الطريقة، يمكن لتطبيقك التفاعل بسلاسة مع خريطة Google الأساسية نفسها. على سبيل المثال، لا تسمح GoogleMap إلا بتسجيل معاودة اتصال واحدة، ولكن ConsumerGoogleMap تتيح معاودتَي اتصال مسجلتَين. تسمح معاودات الاتصال هذه لتطبيقك بتسجيل معاودات اتصال يتم استدعاؤها بالتسلسل.

• احصل على ConsumerController من ConsumerGoogleMap في getConsumerController().

  توفّر ConsumerController إمكانية الوصول إلى ميزات مشاركة الرحلات، مثل مراقبة الرحلات والتحكّم في حالة الرحلة وضبط المواقع الجغرافية.

لمعرفة كيفية إضافة ConsumerGoogleMap وConsumerController إلى تطبيقك في Java وKotlin، اطّلِع على الأمثلة التالية.

جافا

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

الخطوة 3: إضافة دعم للرسومات المتّجهة على Android

إذا كان تصميم تطبيقك يتطلّب دعم الرسومات المتّجهة، أضِف الدعم لأجهزة Android والرسومات المتّجهة القابلة للرسم باستخدام الخطوات التالية:

1. أضِف الرمز البرمجي التالي إلى نشاطك. يوسّع هذا الرمز AppCompatActivity لاستخدام الرسومات المتّجهة القابلة للرسم في حزمة تطوير البرامج (SDK) للمستهلك.

جافا

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

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

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

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