این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

مشاهده یک ناوگان

این بخش نحوه استفاده از کتابخانه ردیابی ناوگان جاوا اسکریپت را برای مشاهده ناوگان نشان می دهد. این رویه ها فرض می کنند که شما کتابخانه ردیابی ناوگان را راه اندازی کرده اید و یک نقشه را بارگذاری کرده اید. برای جزئیات، به تنظیم کتابخانه ردیابی ناوگان جاوا اسکریپت مراجعه کنید.

این سند موارد زیر را که می توانید هنگام مشاهده ناوگان انجام دهید مورد بحث قرار می دهد:

ردیابی ناوگان را شروع کنید .
به رویدادها گوش دهید و خطاها را مدیریت کنید .
ردیابی را متوقف کنید .
هنگام مشاهده ناوگان یک وسیله نقلیه را ردیابی کنید .

ردیابی ناوگان را شروع کنید

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

ارائه‌دهنده مکان ناوگان را معرفی کنید

کتابخانه ردیابی ناوگان جاوا اسکریپت شامل یک ارائه دهنده مکان است که چندین وسیله نقلیه را از Fleet Engine واکشی می کند.

برای نمونه سازی، مراحل زیر را دنبال کنید:

از شناسه پروژه و همچنین ارجاع به واکشی توکن خود استفاده کنید .
از درخواست فیلتر خودرو استفاده کنید پرس و جو فیلتر خودرو کنترل می کند که نقشه کدام خودروها را نشان می دهد. فیلتر به Fleet Engine منتقل می شود.
- برای خدمات درخواستی، از vehicleFilter استفاده کنید و ListVehiclesRequest.filter مرور کنید
- برای کارهای برنامه ریزی شده، از deliveryVehicleFilter استفاده کنید و ListDeliveryVehiclesRequest.filter را مرور کنید
محدوده را برای نمایش خودرو تنظیم کنید . از locationRestriction برای محدود کردن محدوده نمایش وسایل نقلیه روی نقشه استفاده کنید. ارائه‌دهنده موقعیت مکانی تا زمانی که این تنظیم نشده باشد فعال نیست. شما می توانید محدوده مکان را در سازنده یا بعد از سازنده تنظیم کنید.
نمای نقشه را راه اندازی کنید .

مثال‌های زیر نشان می‌دهند که چگونه می‌توان یک ارائه‌دهنده موقعیت ناوگان را برای سناریوهای کار درخواستی و برنامه‌ریزی‌شده نمونه‌سازی کرد. این مثال همچنین نحوه استفاده از locationRestriction در سازنده را برای فعال کردن ارائه‌دهنده مکان نشان می‌دهد.

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

جاوا اسکریپت

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

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

جاوا اسکریپت

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

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

TypeScript

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

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

برای تنظیم locationRestriction بعد از سازنده، locationProvider.locationRestriction در ادامه کد خود اضافه کنید، همانطور که در مثال زیر جاوا اسکریپت نشان داده شده است.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

با استفاده از درگاه نمای نقشه، محدودیت مکان را تنظیم کنید

همچنین می‌توانید محدوده‌های locationRestriction برای مطابقت با منطقه‌ای که در حال حاضر در نمای نقشه قابل مشاهده است تنظیم کنید.

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

جاوا اسکریپت

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

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

جاوا اسکریپت

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 provider 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 provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

هنگامی که ارائه دهنده موقعیت مکانی را ساختید، نمای نقشه را به همان روشی که هنگام دنبال کردن یک وسیله نقلیه انجام می دهید، مقداردهی اولیه کنید.

پس از بارگیری کتابخانه جاوا اسکریپت 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.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  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);
    }
  }
});

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

جاوا اسکریپت

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

TypeScript

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

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

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

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

جاوا اسکریپت

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

ردیابی ناوگان را متوقف کنید

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

محدوده ارائه دهنده مکان را روی null قرار دهید

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

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

جاوا اسکریپت

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

جاوا اسکریپت

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

جاوا اسکریپت

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

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

از سفارشی سازی نشانگر برای ردیابی وسیله نقلیه تحویل استفاده کنید

برای فعال کردن ارائه‌دهنده مکان وسیله نقلیه تحویلی برای ردیابی وسیله نقلیه تحویلی وقتی روی نشانگر ناوگان آن کلیک می‌کنید، این مراحل را دنبال کنید:

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

نمونه هایی برای این مراحل در بخش های زیر آمده است.

یک نشانگر را سفارشی کنید و یک عمل کلیک اضافه کنید

جاوا اسکریپت

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

برای جلوگیری از نشانگرهای تکراری، نشانگر را مخفی کنید

برای جلوگیری از نمایش دو نشانگر برای یک وسیله نقلیه، نشانگر را از ارائه دهنده مکان وسیله نقلیه تحویلی پنهان کنید:

جاوا اسکریپت

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

بعدش چی

به یک نقشه سبک دهید