ردیابی کردن خودرو

این بخش نحوه استفاده از کتابخانه ردیابی ناوگان JavaScript را برای ردیابی خودرو برای سفرهای درخواستی یا تکالیف زمان‌بندی‌شده نشان می‌دهد.

برای ردیابی وسیله نقلیه، این مراحل را انجام دهید:

1. بار کردن کتابخانه و مقداردهی اولیه نمای نقشه
2. ارائه مکان خودرو و نمای نقشه
3. گوش دادن به رویدادها و رسیدگی به خطاها
4. توقف ردیابی

بار کردن کتابخانه و مقداردهی اولیه نمای نقشه

برای نمایش عملیات ناوگان در نقشه صفحه وب خود، از برنامه‌ای استفاده کنید که بااستفاده از کلید API شما نقشه را فراخوانی می‌کند. مثال زیر نشان می‌دهد که چگونه این کار را از HTML انجام دهید:

• منبع نشانی وب: بااستفاده از کلید API شما، Google Maps API را برای درخواست نقشه فرا می‌خواند.

• پارامتر callback: تابع initMap را پس‌از اینکه «میانای برنامه‌سازی کاربردی» تماس را برمی‌گرداند اجرا می‌کند.

• پارامتر libraries: کتابخانه ردیابی ناوگان را بار می‌کند.

• مشخصه defer: به مرورگر اجازه می‌دهد تا زمانی که API بار می‌شود، بقیه صفحه شما را پرداز کند.

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

ارائه مکان خودرو و نمای نقشه

برای شروع ردیابی خودرو، هر دو ارائه‌دهنده مکان خودرو را نمونه‌سازی می‌کنید و نمای نقشه را با شناسه خودرو همان‌طور که در بخش‌های زیر توضیح داده شده است مقداردهی اولیه می‌کنید.

نمونه‌سازی ارائه‌دهنده مکان خودرو

کتابخانه جاوا اسکریپت ردیابی ناوگان شامل یک ارائه‌دهنده مکان برای Fleet Engine API است. از شناسه پروژه و ارجاع به واکِشگر توکن خود استفاده کنید تا آن را همان‌طور که در مثال‌های زیر نشان داده شده است نمونه‌سازی کنید.

سفرهای درخواستی

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

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

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

TypeScript

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

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

مقداردهی اولیه نمای نقشه

پس‌از بار کردن کتابخانه «هم‌رسانی سفر» جاوااسکریپت، نمای نقشه را مقداردهی اولیه کنید و آن را به صفحه HTML اضافه کنید. صفحه شما باید حاوی عنصر <div> باشد که نمای نقشه را نگه می‌دارد. عنصر <div> در مثال‌های زیر map_canvas نامیده می‌شود.=

سفرهای درخواستی

JavaScript

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

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

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

تکالیف زمان‌بندی‌شده

JavaScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-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 want.
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],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

گوش دادن به رویدادها و رسیدگی به خطاها

پس‌از شروع ردیابی خودرو، می‌خواهید پیشرفت آن را روی نقشه به‌روز کنید و خطاها را درحین حرکت خودرو در مسیرش مدیریت کنید.

گوش دادن به رویدادهای خودرو

برای پیگیری پیشرفت خودرو برای سفرهای درخواستی یا تکالیف زمان‌بندی‌شده، باید رویدادهای تغییر را گوش دهید.

بااستفاده از ارائه‌دهنده مکان، فراداده را از شیء vehicle یا deliveryVehicle بازیابی می‌کنید. اطلاعات فراداده شامل «زمان تخمینی رسیدن» و فاصله باقی‌مانده تا مکان بعدی سوار یا پیاده کردن مسافر است. تغییرات در فراداده‌ها رویداد به‌روزرسانی را در ارائه‌دهنده مکان راه‌اندازی می‌کند.

مثال زیر نشان می‌دهد که چگونه به این رویدادهای تغییر گوش دهید.

سفرهای درخواستی

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('update', e => {
  // e.deliveryVehicle contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

TypeScript

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

مدیریت خطاها

پس‌از بار کردن کتابخانه «هم‌رسانی سفر» جاوااسکریپت، نمای نقشه را مقداردهی اولیه کنید و آن را به صفحه HTML اضافه کنید. صفحه شما باید حاوی عنصر <div> باشد که نمای نقشه را نگه می‌دارد. عنصر <div> در مثال‌های زیر map_canvas نامیده می‌شود.=

سفرهای درخواستی

JavaScript

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

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

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

تکالیف زمان‌بندی‌شده

JavaScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-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 want.
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],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

توقف پیگیری خودرو

برای توقف ردیابی خودرو، باید آن را از ارائه‌دهنده مکان بردارید و ارائه‌دهنده مکان را از نمای نقشه بردارید، همان‌طور که در بخش‌های زیر شرح داده شده است. نمونه‌های اینجا هم برای سفرهای درخواستی و هم برای پیاده‌سازی تکالیف زمان‌بندی‌شده اعمال می‌شود.

برداشتن خودرو از ارائه‌دهنده مکان

برای اینکه ارائه‌دهنده مکان ردیابی وسیله نقلیه را متوقف کند، شناسه وسیله نقلیه تحویل را از ارائه‌دهنده مکان بردارید.

سفرهای درخواستی

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

تکالیف زمان‌بندی‌شده

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

ارائه‌دهنده مکان را از نمای نقشه بردارید

مثال زیر نحوه برداشتن ارائه‌دهنده مکان را از نمای نقشه نشان می‌دهد.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

قدم بعدی چیست

• مشاهده ناوگان توزیع
• سبک‌دار کردن نقشه