ردیابی وسیله نقلیه

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

برای ردیابی خودرو، مراحل زیر را انجام دهید:

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

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

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

• منبع URL : با استفاده از کلید API شما با google maps API تماس می گیرد تا نقشه ای را درخواست کند.

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

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

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

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

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

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

ارائه‌دهنده مکان وسیله نقلیه را معرفی کنید

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

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

جاوا اسکریپت

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

وظایف برنامه ریزی شده

جاوا اسکریپت

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

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

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

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

جاوا اسکریپت

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

وظایف برنامه ریزی شده

جاوا اسکریپت

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 با استفاده از ارائه دهنده موقعیت مکانی بازیابی می کنید. اطلاعات متا شامل ETA و مسافت باقی مانده قبل از تحویل یا رها شدن بعدی وسیله نقلیه است. تغییرات در اطلاعات متا باعث ایجاد یک رویداد به‌روزرسانی در ارائه‌دهنده موقعیت مکانی می‌شود.

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

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

جاوا اسکریپت

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

وظایف برنامه ریزی شده

جاوا اسکریپت

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

رسیدگی به خطاها

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

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

جاوا اسکریپت

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

وظایف برنامه ریزی شده

جاوا اسکریپت

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

ردیابی وسیله نقلیه را متوقف کنید

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

یک وسیله نقلیه را از ارائه دهنده موقعیت مکانی حذف کنید

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

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

جاوا اسکریپت

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

وظایف برنامه ریزی شده

جاوا اسکریپت

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

ارائه دهنده موقعیت مکانی را از نمای نقشه حذف کنید

مثال زیر نحوه حذف ارائه دهنده موقعیت مکانی را از نمای نقشه نشان می دهد.

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

بعدش چی

• مشاهده ناوگان تحویل
• به یک نقشه سبک دهید