تخصيص واجهة مستخدم Android

ConsumerMapStyle تحتوي الفئة على طريقتي الإعداد والتصحيح التي توفر لك إمكانية تخصيص ديناميكي للمحددات والخطوط المتعددة. تظهر هذه الفئة بشكل غير متزامن باستخدام ConsumerController.getConsumerMapStyle() .

يستمر تخصيص واجهة المستخدم عبر عمليات تدوير الجهاز ويظل ساريًا حتى ConsumerController تم فصله.

العلامات المخصّصة

طريقة إعداد نوع العلامة وخصائصها هي ConsumerMapStyle.setMarkerStyleOptions(). المساحة المخصّصة لك تلغي خيارات العلامة القيم التلقائية التي تقدّمها حزمة تطوير البرامج (SDK) الخاصة بالمستهلك. لاستعادة القيم التلقائية، يمكنك طلب setMarkerStyleOptions() باستخدام القيمة null للمعلمة MarkerOptions. استرداد MarkerOptions النشط استخدام getMarkerStyleOptions()

أنواع العلامات

العلامات التالية متاحة للتخصيص:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

يتم عرض "TRIP_PICKUP_POINT" و"TRIP_DROPOFF_POINT" أثناء مراقبة الرحلة.

TRIP_VEHICLE شاشة أثناء مراقبة الرحلة لا يتغير رمز العلامة وفقًا لنوع المركبة الفعلي للرحلة. تحديثات حزمة تطوير البرامج (SDK) الخاصة بالمستهلكين تدوير الرمز TRIP_VEHICLE أثناء مراقبة الرحلة لمحاكاة سلوك المركبة الفعلية أثناء انتقالها عبر المسار.

خيارات العلامة

الخصائص القابلة للتخصيص المتاحة لكل علامة هي مجموعة المواقع المُقدّمة بواسطة "خرائط Google" MarkerOptions

تم إنشاء MarkerOptions باستخدام الدالة الإنشائية، ويتم تحديد السمات المخصصة باستخدام أداة Setter. والأسلوب. يتم توفير قيم تلقائية لكل خاصية، لذا ما عليك سوى تحديد القيم المخصصة.

يمكنك إيقاف العلامة عن طريق ضبط visible على false. يجب توفير بيانات كافية للسماح لك باستخدام عنصر واجهة المستخدم الخاص بك بدلاً منه.

مثال

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

الخطوط المتعددة المخصّصة

يتم ضبط تخصيص الخطوط المتعددة باستخدام الطريقة ConsumerMapStyle.setPolylineStyleOptions. إعداد خيارات الخطوط المتعددة المخصصة تلغي القيم التلقائية التي تقدّمها حزمة تطوير البرامج (SDK) الخاصة بالمستهلك. القيم الافتراضية يمكن استعادتها من خلال الاتصال على setPolylineStyleOptions بدون قيمة للمعلمة PolylineOptions. يمكن استرداد PolylineOptions باستخدام getPolylineStyleOptions.

أنواع الخطوط المتعددة

تتوفّر أنواع الخطوط المتعددة التالية للتخصيص:

• ACTIVE_ROUTE
• REMAINING_ROUTE

يتم عرض ACTIVE_ROUTE وREMAINING_ROUTE أثناء مراقبة الرحلة و مسار المركبة.

خصائص الخطوط المتعددة

يوفّر تطبيق "خرائط Google" PolylineOptions السمات القابلة للتخصيص المتاحة لكل خط متعدد الخطوط. تم إنشاء PolylineOptions باستخدام الدالة الإنشائية، ويتم تحديد السمات المخصصة باستخدام أداة Setter. والأسلوب. القيم التلقائية لكل خاصية، لذا فأنت تحتاج فقط إلى تحديد قيم مخصصة. يمكنك إيقاف الخطوط المتعددة من خلال ضبط visible على false.

مثال

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

المسار نشط والمتبقي

عند تفعيل "مستوى تقدُّم الرحلة والطلبات"، يمكن لتطبيقك تخصيص تجربة المستخدم في استخدام الخطوط المتعددة التي تُظهر مركباتك نشطة وباقية المسار الصحيح.

المسار النشط هو المسار الذي تسلكه المركبة حاليًا للوصول إليه النقطة التالية في رحلة المستهلك النشطة. المسار المتبقي هو المسار الذي ستنتقل إليه المركبة بعد المسار النشط. عندما يكون المسار النشط النقطة الوسيطة هي نقطة الطريق الأخيرة للرحلة، أما المسار المتبقي فغير موجود.

يمكن تخصيص الخطوط المتعددة النشطة والمتبقٍ والتحكم في إذن الوصول إليها. حسب تطبيقك. يظهر المسار النشط تلقائيًا والمسار المتبقي غير مرئية.

مثال

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

الخطوط المتعددة الواعية بحركة المرور

يتم إيقاف طبقة حركة المرور للخطوط المتعددة بشكل تلقائي. عند تفعيله، تُستخدم الشرائح التي تمثل امتدادات حركة المرور غير العادية مرسومة فوق الخطوط المتعددة للمسار في z-index PolylineOptions.getZIndex() بالإضافة إلى إزاحة حسب حالة الزيارات.

يتم تمثيل أحوال حركة المرور بإحدى الطرق التالية أربعة أنواع للسرعة. يمكنك تخصيص لون كل نوع سرعة.

لتفعيل "الخطوط المتعددة الواعية بحركة المرور"، عليك إنشاء عنصر TrafficStyle الذي سيتم تمريره بعد ذلك إلى ConsumerMapStyle من خلال طلب البيانات setPolylineTrafficStyle().

مثال

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

ضبط التكبير أو التصغير في الكاميرا للتركيز في رحلة

زر موقعي الافتراضي في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" التي تتيح تركيز الكاميرا على الموقع الجغرافي للجهاز. إذا كان هناك جلسة نشطة حول تقدم الرحلة والطلبات، فقد تحتاج إلى توسيط الكاميرا للتركيز على الرحلة بدلاً من موقع الجهاز.

حزمة تطوير البرامج (SDK) الخاصة بالمستهلكين لنظام التشغيل Android المُدمَجة: Auto Camera

لتتيح لك حزمة تطوير البرامج (SDK) الخاصة بالمستهلك التركيز على الرحلة بدلاً من موقع الجهاز الجغرافي توفر ميزة "الكاميرا التلقائية" التي يتم تفعيلها بشكل تلقائي. تكبير الكاميرا للتركيز على مسار تقدم الرحلة والطلبات ونقطة الطريق التالية للرحلة.

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

إذا كنت بحاجة إلى التحكّم بشكل أكبر في سلوك الكاميرا، يمكنك إيقافه أو تفعيله. الكاميرا التلقائية باستخدام ConsumerController.setAutoCameraEnabled().

يعرض ConsumerController.getCameraUpdate() حدود الكاميرا المقترَحة في تلك اللحظة. يمكنك ثم تقديم CameraUpdate كوسيطة إلى GoogleMap.moveCamera() أو GoogleMap.animateCamera().

تصميم الخرائط باستخدام السحابة الإلكترونية

يتم تحديث ConsumerMapView و ConsumerMapFragment تتيح الفئات تصميم الخرائط المستند إلى السحابة الإلكترونية. لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية، تأكد من أن الخرائط قيمة العارض LATEST. توضّح الأمثلة التالية كيفية استخدام تصميم الخرائط عبر السحابة الإلكترونية مع مشروعك.

ConsumerMapView

لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية في ConsumerMapView، يجب ضبط الحقل mapId على GoogleMapOptions وتمرير GoogleMapOptions إلى getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

مثال

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);
    }
  }
}

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:

1. استخدام ملف XML بشكل ثابت
2. ديناميكيًا باستخدام 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. انظر المثال التالي:

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;
  }
}

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
  }
}