إعداد خريطة

اختيار النظام الأساسي: 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 لعرض مستوى تقدّم الرحلة وتعديله حسب الحاجة.

مثال على كيفية إضافة 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() الطريقة.

Java

 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(). بالإضافة إلى مَعلمة callback، أدرِج التفاصيل التالية:

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

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

Java

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() للمقتطف.

Java

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

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

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

    ConsumerGoogleMap هي فئة ملفوفة لفئة GoogleMap. ويستخدم واجهة برمجة تطبيقات مماثلة لواجهة GoogleMap ليتمكّن تطبيقك من التفاعل مع الخريطة. بهذه الطريقة، يمكن لتطبيقك التفاعل بسلاسة مع "خرائط Google" الأساسية نفسها. على سبيل المثال، لا يسمح GoogleMap إلا بتسجيل مكالمة تلقائية واحدة، ولكن ConsumerGoogleMap يتيح المكالمات المُسجَّلة المزدوجة. تتيح لك هذه وظائف الاستدعاء تسجيل وظائف الاستدعاء التي يتمّ استدعاؤها بشكل تسلسلي.

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

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

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

Java

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 لاستخدام عناصر الرسم المتجه في حزمة Consumer SDK.

Java

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

// ...

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

Kotlin

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

// ...

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

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

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

منح الخريطة نمطًا