إعداد خريطة

اختيار النظام الأساسي: 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. يمكنك إجراء مكالمة من "onCreate()" إلى "getConsumerGoogleMapAsync()". ضِمن بالإضافة إلى مَعلمة معاودة الاتصال، عليك تضمين التفاصيل التالية:

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

لتفعيل ميزة "مشاركة الرحلة" في تطبيقك، أضِف الصفوف التالية إلى تطبيقك: 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 لاستخدام عناصر رسم المتجهات في حزمة تطوير البرامج (SDK) الخاصة بالمستهلكين.

Java

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

// ...

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

Kotlin

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

// ...

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

ما هي الخطوات التالية؟

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