تصميم خريطة

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

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

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

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

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

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

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 في مرجع واجهة برمجة التطبيقات Google Maps 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" }
        ]
      }
    ]
  }
});

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. استخدِم خيارات مستوى الرؤية التالية لإنشاء معايير تحدِّد مستوى رؤية عنصر مهمة:

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

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

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

قواعد مستوى رؤية خطوط المسار المتعدّدة وموقع المركبة

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

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

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

إيقاف ميزة "التعديل التلقائي لإطار العرض"

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

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

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

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

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