إعداد خريطة

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

    • النشاط أو المقتطف الذي يتضمّن العنصر يجب أن يكون FragmentActivity أو Fragment (على التوالي) هو 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

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