تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تتبُّع أسطولك باستخدام مكتبة JavaScript FleetTracking

تتيح لك مكتبة JavaScript Fleet Tracking Library عرض مواقع المركبات في أساطيلك في الوقت الفعلي تقريبًا. تستخدم المكتبة واجهة برمجة التطبيقات حسب الطلب الرحلات والتسليمات واجهة برمجة التطبيقات للسماح بمؤثرات عرض المركبات وكذلك الرحلات. مجموعة JavaScript تحتوي "مكتبة التتبّع" على مكوّن خريطة JavaScript يمكن الوصول إليه. استبدال كيان google.maps.Map عادي ومكوّنات البيانات إلى بالاتصال مع Fleet Engine.

المكونات

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

عرض خريطة تتبُّع الأسطول

يعرض مكون عرض خريطة تتبع الأسطول موقع المركبات نقاط طريق الرحلة. إذا كان مسار مركبة معروفًا، يعرض مكوِّن عرض الخريطة وتحرّك تلك المركبة أثناء تحركها على طول مسارها المتوقع.

عرض خريطة تتبُّع الأسطول
مثال

موفِّرو المواقع الجغرافية

يعمل مقدّمو المواقع الجغرافية باستخدام المعلومات المخزَّنة في Fleet Engine لإرسال بيانات الموقع الجغرافي. المعلومات الخاصة بالأشياء التي يتم تتبعها في خريطة مشاركة الرحلة.

مقدّم خدمة الموقع الجغرافي للمركبة

يعرض مقدّم الموقع الجغرافي للمركبة معلومات عن الموقع الجغرافي لمركبة واحدة. وتضم معلومات عن الموقع الجغرافي للمركبة والرحلة الحالية المخصّصة له المركبة.

مزوِّد الموقع الجغرافي لمجموعة المركبات

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

التحكم في مستوى رؤية المواقع التي يتم تتبعها

تحدِّد قواعد مستوى الرؤية وقت ظهور عنصر الموقع الجغرافي الذي يتم تتبُّعه على الخريطة. لمقدم خدمة المواقع في Fleet Engine. ملاحظة - استخدام موقع مخصص أو مشتق تغيير قواعد مستوى الرؤية.

مركبات

تكون أي مركبة مرئية بمجرد إنشائها في Fleet Engine وتكون مرئية. عندما تكون حالة السيارة Online. هذا يعني أن المركبة يمكن أن تكون مرئية حتى عندما لا تكون هناك رحلة حالية مخصصة للمركبة.

علامات الموقع الجغرافي لنقطة الطريق

تشير علامة موقع النقطة الوسيطة إلى نقاط على طول رحلة مركبة بالمنشأ ونهاية الوجهة النهائية. موقع النقطة الوسيطة في ما يلي العلامات التي يمكن تحديدها:

نقطة الانطلاق - تشير إلى موقع بدء رحلة المركبة
متوسط - يشير إلى محطات التوقف لرحلة المركبة
الوجهة - للإشارة إلى الموقع النهائي لرحلة المركبة

يتم عرض نقاط طريق المركبات المخطط لها على الخريطة كأصل أو متوسط وعلامات الوجهة.

بدء استخدام مكتبة JavaScript Fleet Tracking Library

قبل استخدام مكتبة JavaScript Fleet Tracking Library، تأكَّد من باستخدام Fleet Engine والحصول على واجهة برمجة تطبيقات المفتاح. بعد ذلك، أنشِئ مطالبة بمعرّف الرحلة ومعرّف المركبة.

إنشاء مطالبة بمعرّف الرحلة ومعرّف المركبة

لتتبّع المركبات باستخدام موقع المركبة Google+، يمكنك إنشاء رمز JSON المميّز للويب (JWT) مع رحلة المطالبة بمستند تعريف المركبة ومستند تعريف المركبة

لإنشاء حمولة JWT، أضِف مطالبة أخرى في قسم التفويض. باستخدام المفتاحين tripid وvehicleid، واضبط value لكل مفتاح على *. يجب إنشاء الرمز المميّز باستخدام السحابة الإلكترونية Fleet Engine Service Super User. إدارة الهوية وإمكانية الوصول. تجدر الإشارة إلى أنّ هذا الإجراء يمنح إمكانية الوصول الواسع النطاق إلى مجموعة الأجهزة وقراءتها وتعديلها. كيانات محرّك البحث، ويجب مشاركتها مع مستخدمين موثوق بهم فقط

يوضح المثال التالي كيفية إنشاء رمز مميز للتتبع حسب المركبة المهمة:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

إنشاء برنامج لاسترجاع الرمز المميّز للمصادقة

تطلب مكتبة JavaScript Fleet Tracking Library رمزًا مميزًا باستخدام المصادقة لجلب الرموز المميزة عندما يكون أي مما يلي صحيحًا:

لا يحتوي على رمز مميّز صالح، كأنه لم يستدعِ برنامج الجلب على تحميل صفحة جديدة أو في حال عدم عرض برنامج الجلب مع رمز مميّز.
انتهت صلاحية الرمز المميّز الذي تم جلبه في السابق.
إنّ الرمز المميّز الذي حصل عليه سابقًا هو في غضون دقيقة واحدة من انتهاء صلاحيته.

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

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

يجب أن يعرض برنامج الجلب بيانات البنية مع حقلين، محاطين بوعد:

سلسلة token.
رقم expiresInSeconds تنتهي صلاحية الرمز خلال هذه المدة الزمنية بعد جلب البيانات.

يوضّح المثال التالي كيفية إنشاء برنامج لاسترجاع الرموز المميّزة للمصادقة:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

عند تنفيذ نقطة النهاية من جانب الخادم لاستخراج الرموز المميزة، اجعل مع وضع ما يلي في الاعتبار:

يجب أن تعرض نقطة النهاية وقت انتهاء صلاحية الرمز المميز؛ في المثال أعلاه، يتم تحديدها على النحو التالي data.ExpiresInSeconds.
يجب أن يمر وقت انتهاء صلاحية الرمز المميز للمصادقة (بالثواني، من وقت الجلب) إلى المكتبة، كما هو موضح في المثال.
يعتمد SERVER_TOKEN_URL على التنفيذ في الخلفية، فيما يلي أمثلة على عناوين URL:
- https://SERVER_URL/token/driver/VEHICLE_ID
- https://SERVER_URL/token/consumer/TRIP_ID
- https://SERVER_URL/token/fleet_reader

تحميل خريطة من HTML

يوضّح المثال التالي كيفية تحميل مكتبة "مشاركة رحلة JavaScript" في JavaScript. من عنوان URL محدد. تنفّذ المَعلمة callback الدالة initMap. بعد تحميل واجهة برمجة التطبيقات. تتيح السمة defer للمتصفّح مواصلة العرض. بقية أجزاء صفحتك أثناء تحميل واجهة برمجة التطبيقات.

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

متابعة مركبة

يوضح هذا القسم كيفية استخدام مكتبة JavaScript Fleet Tracking Library لاتباع المركبة. تأكد من تحميل المكتبة من دالة رد الاتصال المحددة في علامة النص البرمجي قبل تشغيل الرمز.

إنشاء نسخة من موفّر الموقع الجغرافي للمركبة

تحدد مكتبة JavaScript Fleet Tracking Library مسبقًا موفر موقع جغرافي واجهة برمجة تطبيقات الرحلات والتسليمات للطلب استخدِم رقم تعريف مشروعك ومرجعًا لك. مصنع رموز لإنشاء مثيله.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

إعداد عرض الخريطة

بعد تحميل مكتبة "مشاركة رحلة JavaScript"، عليك إعداد عرض الخريطة. وإضافته إلى صفحة HTML. يجب أن تحتوي صفحتك على العنصر <div> يحمل عرض الخريطة. تتم تسمية عنصر <div> باسم <div> في المثال أدناه.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

الاستماع إلى تغييرات الأحداث

يمكنك استرداد معلومات وصفية عن مركبة من عنصر vehicle. باستخدام موفر الموقع. تشتمل معلومات التعريف على الوقت المقدر للوصول المسافة قبل موعد التسليم أو التسليم التالي للمركبة. التغييرات في علامة التعريف إلى تشغيل حدث update. يوضح المثال التالي كيفية الاستماع على أحداث التغيير هذه.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

الاستماع إلى الأخطاء

الأخطاء التي تنشأ بشكل غير متزامن بسبب طلب تشغيل معلومات المركبة أحداث الأخطاء. يوضح المثال التالي كيفية الاستماع إلى هذه الأحداث في لمعالجة الأخطاء.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

إيقاف التتبع

لمنع مقدّم خدمة الموقع الجغرافي من تتبُّع المركبة، أزِل رقم تعريف المركبة. من موفِّر الموقع الجغرافي

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

إزالة موفر الموقع من عرض الخريطة

يوضح المثال التالي كيفية إزالة مزوّد موقع جغرافي من عرض الخريطة.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

عرض مجموعة مركبات

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

إنشاء مثيل لموقع أسطول المركبات

تحدد مكتبة JavaScript Fleet Tracking Library مسبقًا موفّر موقع لجلب عدة مركبات من واجهة برمجة التطبيقات On Demand Rides and Deliveries API. يمكنك استخدام معرّف المشروع بالإضافة إلى مرجع إلى أداة جلب الرموز المميزة لإنشاء مثيلها.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

تحدّد السمة vehicleFilter طلب بحث يتم استخدامه لفلترة المركبات المعروضة على الخريطة. يتم تمرير هذا الفلتر مباشرةً إلى Fleet Engine. عرض ListVehiclesRequest للاطّلاع على التنسيقات المتوافقة

تحدّد ميزة locationRestriction المنطقة التي يمكن فيها عرض المركبات على الخريطة. وتتحكّم أيضًا في ما إذا كان تتبُّع الموقع الجغرافي نشطًا أم لا. تتبُّع الموقع الجغرافي لن تبدأ حتى يتم تعيين هذا.

وبعد إنشاء موفّر الموقع الجغرافي، عليك إعداد الخريطة. .

ضبط تقييد الموقع الجغرافي باستخدام إطار عرض الخريطة

يمكن ضبط حدود locationRestriction لمطابقة المنطقة المرئية في عرض الخريطة.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

الاستماع إلى تغييرات الأحداث

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

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

الاستماع إلى الأخطاء

الأخطاء التي تنشأ بشكل غير متزامن عن طلب معلومات مجموعة المركبات أحداث الأخطاء المشغِّلة. للاطّلاع على أمثلة توضّح كيفية الاستماع إلى هذه الأحداث، يُرجى الرجوع إلى إلى الاستماع إلى الأخطاء.

إيقاف التتبع

لمنع مقدم خدمة الموقع من تتبع الأسطول، اضبط حدود مقدم خدمة الموقع فارغ.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

إزالة موفر الموقع من عرض الخريطة

يوضح المثال التالي كيفية إزالة مزوّد موقع جغرافي من عرض الخريطة.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

تخصيص شكل ومظهر الخريطة الأساسية

لتخصيص شكل ومظهر مكوِّن الخرائط، نمط الخريطة باستخدام أدوات تستند إلى السحابة الإلكترونية أو من خلال ضبط الخيارات في الرمز مباشرةً.

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

تصميم الخرائط المستندة إلى السحابة الإلكترونية يسمح لك بإنشاء أنماط الخريطة وتعديلها لأي من تطبيقاتك التي تستخدم خرائط Google من Google Cloud Console بدون الحاجة إلى إجراء أي تغييرات على الرمز. تشير رسالة الأشكال البيانية يتم حفظ أنماط الخريطة كمعرّفات خرائط في مشروعك على السحابة الإلكترونية. لتطبيق نمط على خريطة تتبع مجموعة JavaScript، حدد mapId عند إنشاء JourneySharingMapView. لا يمكن تغيير الحقل mapId. أو إضافتها بعد إنشاء مثيل JourneySharingMapView. ما يلي: مثال يوضح كيفية تفعيل نمط خريطة تم إنشاؤه سابقًا بمعرّف خريطة.

JavaScript

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

TypeScript

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

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

هناك طريقة أخرى لتخصيص تصميم الخريطة وهي تحديد mapOptions عند إنشاء JourneySharingMapView.

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

استخدام عمليات تخصيص العلامات

باستخدام مكتبة JavaScript Fleet Tracking Library، يمكنك تخصيص الشكل والمظهر من العلامات التي تمت إضافتها إلى الخريطة. يمكنك فعل ذلك عن طريق تحديد تخصيصات العلامة، الذي تطبقه مكتبة تتبع الأسطول قبل إضافة علامات إلى الخريطة ومع كل تحديث محدد للموقع.

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

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

بالإضافة إلى ذلك، يمكنك استخدام وظائف التخصيص لفلترة إذن الوصول إلى العلامات. للقيام بذلك، اتصل setVisible(false) على محدد الموقع.

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

توفِّر مكتبة "تتبُّع الأسطول" مَعلمات التخصيص التالية:

تغيير نمط العلامات باستخدام `MarkerOptions`

يوضح المثال التالي كيفية ضبط تصميم علامة المركبة باستخدام عنصر MarkerOptions. اتبع هذا النمط لتخصيص تصميم أي باستخدام أي من معلمات تخصيص العلامة المذكورة أعلاه.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

تغيير تصميم العلامات باستخدام وظائف التخصيص

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

إضافة معالجة النقر إلى العلامات

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

فلترة العلامات المرئية

يوضّح المثال التالي كيفية فلترة علامات المركبات الظاهرة. اتبع هذا النمط لفلترة أي علامات باستخدام أي من تخصيصات العلامة المعلمات المدرجة أعلاه.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

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

باستخدام مكتبة Fleet Tracking Library، يمكنك أيضًا تخصيص مظهر مسار المركبة الذي تتبعه على الخريطة. تنشئ المكتبة google.maps.Polyline كائن لكل زوج من الإحداثيات في المركبة النشطة أو المتبقية path. يمكنك تصميم عناصر Polyline من خلال تحديد تخصيصات الخطوط المتعددة. تشير رسالة الأشكال البيانية ثم تطبق هذه التخصيصات في حالتين: قبل إضافة الكائنات على الخريطة، والوقت الذي تغيرت فيه البيانات المستخدمة لهذه الكائنات.

وكما هو الحال في تخصيص العلامة، يمكنك تحديد مجموعة من PolylineOptions ليتم تطبيقها على جميع كائنات Polyline المتطابقة عند إنشاء أو تحديث.

وبالمثل، يمكنك تحديد دالة تخصيص. وظائف التخصيص تسمح بالنمط الفردي للكائنات بناءً على البيانات المرسلة بواسطة Fleet Engine. يمكن للدالة تغيير نمط كل كائن بناءً على الحالة الحالية المركبة على سبيل المثال، تلوين العنصر Polyline بظل أغمق أو مما يجعله أكثر سمكًا عندما تتحرك السيارة بشكل أبطأ. يمكنك حتى الانضمام إلى من مصادر خارج Fleet Engine وتصميم عنصر Polyline استنادًا إلى ذلك المعلومات.

ويمكنك تحديد عمليات التخصيص باستخدام المَعلمات الواردة في FleetEngineVehicleLocationProviderOptions يمكنك ضبط إعدادات مخصّصة لحالات المسارات المختلفة في المركبة. السفر - سواء سافرت بالفعل أو سافرت بشكل نشط أو لم يسافر عليها بعد. تشير رسالة الأشكال البيانية المعلمات هي كما يلي:

takenPolylineCustomization, لمسار سبق الانتقال إليه
activePolylineCustomization, لمسار متنقّل بشكل نشط
remainingPolylineCustomization, لمسار لم يتم التنقل فيه بعد.

تغيير نمط عناصر `Polyline` باستخدام `PolylineOptions`

يوضّح المثال التالي كيفية ضبط التصميم لعنصر Polyline. مع PolylineOptions اتّبِع هذا النمط لتخصيص تصميم أي عنصر Polyline باستخدام أي لتخصيصات الخطوط المتعددة المذكورة سابقًا.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

تغيير نمط عناصر `Polyline` باستخدام وظائف التخصيص

يوضح المثال التالي كيفية ضبط عنصر Polyline نشط. التصميم. اتّبِع هذا النمط لتخصيص تصميم أي عنصر Polyline. باستخدام أيٍّ من مَعلمات تخصيص الخطوط المتعددة المذكورة سابقًا.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

التحكّم في مستوى رؤية عناصر `Polyline`

تكون جميع عناصر Polyline مرئية تلقائيًا. لإنشاء عنصر Polyline غير مرئي، قم بتعيين visible الموقع:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

عرض عناصر "`Polyline`" المتوافقة مع حركة المرور

يعرض Fleet Engine بيانات سرعة حركة المرور للمسارات النشطة والباقية المركبة التي تتبعها. يمكنك استخدام هذه المعلومات لاختيار نمط Polyline العناصر وفقًا لسرعات حركة المرور:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

عرض `InfoWindow` لمركبة أو علامة موقع جغرافي

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

يوضح المثال التالي كيفية إنشاء InfoWindow وإرفاقه بـ محدّد الموقع للمركبة

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

إيقاف الاحتواء التلقائي

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

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

استبدال خريطة حالية

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

على سبيل المثال، لنفترض أن لديك صفحة ويب تتضمن google.maps.Map قياسي الكيان الذي تظهر عليه العلامة:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

لإضافة مكتبة JavaScript Journey Share، والتي تتضمّن ميزة "تتبُّع الأسطول":

أضف رمزًا لمصنع الرموز المميزة للمصادقة.
إعداد موفّر موقع جغرافي في الدالة initMap().
إعداد عرض الخريطة في الدالة initMap(). تحتوي طريقة العرض على الخريطة.
انقل التخصيص إلى وظيفة معاودة الاتصال لعرض الخريطة. التهيئة.
أضِف مكتبة المواقع الجغرافية إلى أداة تحميل واجهة برمجة التطبيقات.

يوضح المثال التالي التغييرات التي سيتم إجراؤها:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

إذا كنت تقود مركبة تحمل المعرّف المحدّد بالقرب من Oracle Park، سيتم عرضها على الخريطة.

تتبُّع أسطولك باستخدام مكتبة JavaScript FleetTracking

المكونات

عرض خريطة تتبُّع الأسطول

موفِّرو المواقع الجغرافية

مقدّم خدمة الموقع الجغرافي للمركبة

مزوِّد الموقع الجغرافي لمجموعة المركبات

التحكم في مستوى رؤية المواقع التي يتم تتبعها

مركبات

علامات الموقع الجغرافي لنقطة الطريق

بدء استخدام مكتبة JavaScript Fleet Tracking Library

إنشاء مطالبة بمعرّف الرحلة ومعرّف المركبة

إنشاء برنامج لاسترجاع الرمز المميّز للمصادقة

JavaScript

TypeScript

تحميل خريطة من HTML

متابعة مركبة

إنشاء نسخة من موفّر الموقع الجغرافي للمركبة

JavaScript

TypeScript

إعداد عرض الخريطة

JavaScript

TypeScript

الاستماع إلى تغييرات الأحداث

JavaScript

TypeScript

الاستماع إلى الأخطاء

JavaScript

TypeScript

إيقاف التتبع

JavaScript

TypeScript

إزالة موفر الموقع من عرض الخريطة

JavaScript

TypeScript

عرض مجموعة مركبات

إنشاء مثيل لموقع أسطول المركبات

JavaScript

TypeScript

ضبط تقييد الموقع الجغرافي باستخدام إطار عرض الخريطة

JavaScript

TypeScript

الاستماع إلى تغييرات الأحداث

JavaScript

TypeScript

الاستماع إلى الأخطاء

إيقاف التتبع

JavaScript

TypeScript

إزالة موفر الموقع من عرض الخريطة

JavaScript

TypeScript

تخصيص شكل ومظهر الخريطة الأساسية

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

JavaScript

TypeScript

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

JavaScript

TypeScript

استخدام عمليات تخصيص العلامات

تغيير نمط العلامات باستخدام MarkerOptions

JavaScript

TypeScript

تغيير تصميم العلامات باستخدام وظائف التخصيص

JavaScript

TypeScript

إضافة معالجة النقر إلى العلامات

JavaScript

TypeScript

فلترة العلامات المرئية

JavaScript

TypeScript

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

تغيير نمط عناصر Polyline باستخدام PolylineOptions

JavaScript

TypeScript

تغيير نمط عناصر Polyline باستخدام وظائف التخصيص

JavaScript

TypeScript

التحكّم في مستوى رؤية عناصر Polyline

JavaScript

تغيير نمط العلامات باستخدام `MarkerOptions`

تغيير نمط عناصر `Polyline` باستخدام `PolylineOptions`

تغيير نمط عناصر `Polyline` باستخدام وظائف التخصيص

التحكّم في مستوى رؤية عناصر `Polyline`

عرض عناصر "`Polyline`" المتوافقة مع حركة المرور

عرض `InfoWindow` لمركبة أو علامة موقع جغرافي