تصميم خريطة

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

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

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

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

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

ConsumerMapView

لاستخدام تصميم الخرائط المستند إلى السحابة الإلكترونية في ConsumerMapView، يجب ضبط الحقل mapId على GoogleMapOptions وتمرير GoogleMapOptions إلى getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) أو getConsumerGoogleMapAsync(ConsumerMapPaymentCallback, 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 عددًا من عناصر بيانات المهام التي يمكن إظهارها باستخدام حزمة تطوير البرامج (SDK) الخاصة بالمستهلك

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

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

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

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

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

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

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

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

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

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

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

لا يمكن ظهور الخطوط المتعددة للمسار ما لم يكن الموقع الجغرافي للمركبة أيضًا مرئيًا. visible; بخلاف ذلك يمكن استنتاج موقع المركبة في نهاية متعدد الخطوط.

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

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

خيارات مستوى الظهور نفسها	معيار مستوى الرؤية	الإرشادات
	خيارات الخطوط المتعددة للمسارات مضبوطة على "مرئي دائمًا".	اضبط الموقع الجغرافي للمركبة على "مرئي دائمًا".
	تم ضبط الموقع الجغرافي للمركبة على "غير مرئي أبدًا".	اضبط الخطوط المتعددة للمسار على "عدم ظهورها أبدًا".
	خيار مستوى الرؤية هو أي مما يلي: عدد المحطات المتبقية المدة حتى الوقت المقدر للوصول مسافة القيادة المتبقية	اضبط خيارات الخطوط المتعددة للمسار على قيمة أقل من أو تساوي القيمة التي تم ضبطها لموقع المركبة. على سبيل المثال: "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,
  ...
});

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

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