تصميم خريطة

يتناول هذا المستند كيفية تخصيص شكل الخريطة وأسلوبها والتحكّم في خيارات ملف العرض ومستوى ظهور البيانات. يمكنك إجراء ذلك بالطُرق التالية:

• استخدام ميزة تصميم الخرائط المستندة إلى السحابة الإلكترونية
• ضبط خيارات نمط الخريطة مباشرةً في الرمز الخاص بك

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

يمكنك تخصيص شكل مكوّن الخرائط ومظهره باستخدام ميزة "تصميم الخرائط" المستندة إلى السحابة الإلكترونية. يمكنك إنشاء أنماط الخرائط وتعديلها على Google Cloud Console لأي من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز البرمجي. لمزيد من المعلومات، يُرجى الاطّلاع على تصميم الخرائط المستنِد إلى السحابة الإلكترونية.

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

ConsumerMapView

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

مثال

Java

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

Kotlin

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:

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

Java

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

Kotlin

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

لتطبيق نمط خريطة على خريطة مشاركة رحلات المستهلكين المستندة إلى JavaScript، حدِّد mapId و أي mapOptions آخر عند إنشاء JourneySharingMapView.

ملاحظة: لا يمكنك تغيير mapId أو إضافته بعد إنشاء JourneySharingMapView .

توضّح الأمثلة التالية كيفية تطبيق أسلوب خريطة باستخدام معرّف خريطة.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

تصميم الخرائط مباشرةً في الرمز الخاص بك

يمكنك أيضًا تخصيص تصميم الخريطة من خلال ضبط خيارات الخريطة عند إنشاء JourneySharingMapView. توضّح الأمثلة التالية كيفية تنسيق خريطة باستخدام خيارات الخريطة. لمزيد من المعلومات عن خيارات الخريطة التي يمكنك ضبطها، اطّلِع على mapOptions في مرجع واجهة برمجة التطبيقات JavaScript لـ "خرائط Google".

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

التحكّم في مستوى ظهور بيانات المهام لحزمة تطوير البرامج (SDK)

يمكنك التحكّم في مستوى رؤية عناصر مهام معيّنة على الخريطة باستخدام قواعد مستوى الرؤية.

ملاحظة: تظهر علامات المواقع الجغرافية دائمًا على الخريطة. على سبيل المثال، يتم دائمًا عرض موقع تسليم الشحنة على الخريطة، بغض النظر عن حالة التسليم. يمكنك مع ذلك تخصيص مظهر هذه العلامات. يُرجى الاطّلاع على تخصيص العلامات.

مستوى الظهور التلقائي لبيانات المهام

تظهر بيانات المهام المُسنَدة إلى مركبة تلقائيًا عندما تكون المركبة ضمن 5 محطات من المهمة. تنتهي إذن الوصول عند إكمال المهمة أو إلغائها.

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

نوع المهمة	مستوى الظهور التلقائي	هل يمكن تخصيصها؟	الوصف
مهام عدم التوفّر	غير مرئية	لا	تُستخدَم لراحة السائقين وإعادة التزوّد بالوقود. إذا كان أحد المسارات المؤدية إلى مهمة تسليم يحتوي أيضًا على نقطة توقف أخرى للمركبة، لا يتم عرض نقطة التوقف هذه إذا كانت تحتوي على مهام عدم التوفّر فقط. يبقى وقت الوصول المُقدَّر والوقت المُقدَّر لإكمال المهمة معروضَين لمهمة التسليم نفسها.
فتح مهام المركبات	مرئي	نعم	تنتهي إمكانية الوصول عند إكمال المهمة أو إلغائها. يمكنك تخصيص مستوى ظهور مهام المركبات المفتوحة. اطّلِع على تخصيص مستوى رؤية المهام المفتوحة للمركبات.
مهام المركبات المغلقة	غير مرئية	لا	لا يمكنك تخصيص مستوى عرض مهام المركبات المغلقة.

تخصيص مستوى ظهور مهام المركبات المفتوحة

توفّر واجهة TaskTrackingInfo عددًا من عناصر بيانات المهام التي يمكن إظهارها باستخدام حزمة Consumer SDK.

عناصر بيانات المهام القابلة للتخصيص
خطوط المسار المتعدّدة الوقت المقدَّر للوصول الوقت المقدَّر لإكمال المهمة	المسافة المتبقية للقيادة إلى المهمة عدد المحطات المتبقية الموقع الجغرافي للمركبة

خيارات مستوى الرؤية لكلّ مهمة

يمكنك تخصيص إعدادات مستوى الرؤية لكل مهمة على حدة من خلال ضبط TaskTrackingViewConfig عند إنشاء مهمة أو تعديلها ضمن Fleet Engine. استخدِم خيارات مستوى العرض التالية لإنشاء معايير لتحديد مستوى عرض عنصر المهمة:

خيارات مستوى العرض
عدد المحطات المتبقية المدة المتبقية حتى وقت الوصول المقدَّر المسافة المتبقية للقيادة	مرئي دائمًا غير مرئية مطلقًا

ملاحظة: يمكن ربط أي عنصر بيانات معيّن بخيار مستوى ظهور واحد فقط. لا يمكن الجمع بين المعايير باستخدام OR أو AND.

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

عنصر البيانات المطلوب تعديله	مستوى الرؤية	المعيار
خطوط متعددة للمسار	إظهار	المركبة على بعد 3 محطات.
الوصول	إظهار	المسافة المتبقية للقيادة أقصر من 5000 متر.
عدد المحطات المتبقية	عدم الإظهار مطلقًا	المركبة على بعد 3 محطات.

يوضّح المثال التالي هذه الإعدادات:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

ملاحظة: يمكنك أيضًا تخصيص خيارات مستوى الرؤية التلقائية لمشروعك من خلال التواصل مع فريق الدعم.

خطوط البوليلين للمسارات وقواعد مستوى رؤية الموقع الجغرافي للمركبة

لا يمكن أن تكون خطوط البوليلين للمسار مرئية ما لم يكن موقع المركبة مرئًا أيضًا، وإلا يمكن استنتاج موقع المركبة من خلال نهاية خط البوليلين.

ملاحظة مهمة: يجب أن تكون قواعد إذن الوصول إلى خطوط البوليلين للمسار قاسية بالقدر نفسه أو أكثر صرامة من قواعد إذن الوصول إلى موقع المركبة الجغرافي.

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

خيارات الظهور نفسها	معيار مستوى العرض	الإرشادات
	خيارات الخطوط المتعددة للمسارات مضبوطة على "مرئي دائمًا".	اضبط الموقع الجغرافي للمركبة على "ظاهر دائمًا".
	تم ضبط الموقع الجغرافي للمركبة على "غير مرئي أبدًا".	اضبط خطوط البوليلين للمسار على "غير مرئية أبدًا".
	خيار مستوى الرؤية هو أيّ مما يلي: عدد المحطات المتبقية المدة المتبقية حتى الوصول المسافة المتبقية للقيادة	اضبط خيارات الخطوط المتعددة للمسار على قيمة أقل من أو تساوي القيمة التي تم ضبطها لموقع المركبة. على سبيل المثال: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
خيارات مختلفة لمستوى الرؤية	معايير مستوى العرض	الإرشادات
	الموقع الجغرافي للمركبة مرئي	لا يحدث ذلك إلا عند استيفاء كلّ من خيارَي ظهور المركبة وظهور الخطوط المتعددة. على سبيل المثال: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } في هذا المثال، لا يظهر موقع المركبة إلا إذا كان عدد المحطات المتبقية لا يقل عن 3 وكانت المسافة المتبقية للقيادة لا تقل عن 3, 000 متر.

إيقاف ميزة "الملاءمة التلقائية"

يمكنك إيقاف ملاءمة الخريطة تلقائيًا لإطار العرض مع المركبة والمسار المتوقّع من خلال إيقاف ميزة "الملاءمة التلقائية". يوضّح المثال التالي كيفية إيقاف ميزة "التلائم التلقائي" عند ضبط عرض "خريطة" لمشاركة الرحلة.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

• تخصيص العلامات
• تخصيص الخطوط المتعددة