ناوگان خود را با کتابخانه ردیابی ناوگان جاوا اسکریپت ردیابی کنید

کتابخانه ردیابی ناوگان جاوا اسکریپت به شما امکان می دهد مکان خودروها را در ناوگان آنها در زمان واقعی تجسم کنید. این کتابخانه از Deliveries API برای تجسم وسایل نقلیه تحویل و همچنین وظایف استفاده می کند. مانند کتابخانه ردیابی حمل و نقل جاوا اسکریپت ، شامل یک مؤلفه نقشه جاوا اسکریپت است که جایگزینی برای یک موجودیت استاندارد google.maps.Map و اجزای داده برای اتصال با Fleet Engine است.

اجزاء

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

نمای نقشه ردیابی ناوگان

مولفه نمای نقشه ردیابی ناوگان، مکان وسایل نقلیه و وظایف را به تصویر می کشد. اگر مسیر یک وسیله نقلیه مشخص باشد، مؤلفه نمای نقشه آن وسیله نقلیه را در حالی که در مسیر پیش بینی شده خود حرکت می کند، متحرک می کند.

ارائه دهندگان موقعیت مکانی

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

ارائه دهنده مکان وسیله نقلیه تحویل

ارائه‌دهنده مکان وسیله نقلیه تحویل، اطلاعات موقعیت مکانی یک وسیله نقلیه تحویلی را نمایش می‌دهد. دارای اطلاعاتی در مورد مکان وسیله نقلیه و همچنین وظایفی است که توسط وسیله نقلیه تحویل انجام شده است.

ارائه دهنده مکان ناوگان تحویل

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

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

این بخش قوانین دید برای اشیاء مکان ردیابی شده روی نقشه را برای ارائه دهنده مکان از پیش تعریف شده Fleet Engine توضیح می دهد. ارائه دهندگان مکان سفارشی یا مشتق شده ممکن است قوانین دید را تغییر دهند.

وسایل نقلیه تحویل

وسیله نقلیه تحویلی به محض ایجاد در Fleet Engine قابل مشاهده است و بدون توجه به وظایفش در سراسر مسیر قابل مشاهده است.

نشانگرهای محل کار

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

محل نتایج کار با نشانگرهای نتیجه کار نمایش داده می شود. وظایف با نتیجه SUCCEEDED با نشانگرهای کار موفق نمایش داده می شوند، در حالی که همه وظایف دیگر با نشانگرهای کار ناموفق نمایش داده می شوند.

با کتابخانه ردیابی ناوگان جاوا اسکریپت شروع کنید

قبل از استفاده از کتابخانه جاوا اسکریپت Fleet Tracking مطمئن شوید که با Fleet Engine و دریافت کلید API آشنا هستید. سپس یک شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید.

یک شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید

برای ردیابی وسایل نقلیه تحویل با استفاده از ارائه‌دهنده مکان وسیله نقلیه تحویل ، یک رمز وب JSON (JWT) با شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید.

برای ایجاد بار JWT، یک ادعای اضافی در بخش مجوز با کلیدهای taskid و deliveryvehicleid اضافه کنید و مقدار هر کلید را روی * تنظیم کنید. توکن باید با استفاده از نقش Super User Cloud IAM Fleet Engine Service ایجاد شود. توجه داشته باشید که این امکان دسترسی گسترده به ایجاد، خواندن و اصلاح موجودیت‌های Fleet Engine را می‌دهد و فقط باید با کاربران قابل اعتماد به اشتراک گذاشته شود.

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

یک واکشی نشانه احراز هویت ایجاد کنید

می‌توانید یک واکشی توکن احراز هویت ایجاد کنید تا با استفاده از یک گواهی حساب سرویس برای پروژه خود ، توکنی را که با ادعاهای مناسب بر روی سرورهای خود ضرب شده است، بازیابی کنید. مهم است که فقط توکن ها را در سرورهای خود برش دهید و هرگز گواهی های خود را در هیچ کلاینت به اشتراک نگذارید. در غیر این صورت، امنیت سیستم خود را به خطر خواهید انداخت.

واکشی باید یک ساختار داده با دو فیلد را که در یک Promise پیچیده شده است برگرداند:

• یک token رشته
• یک عدد expiresInSeconds . یک توکن در این مدت پس از واکشی منقضی می شود.

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

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

در غیر این صورت، کتابخانه از رمز صادر شده قبلی استفاده می کند و هنوز معتبر است و واکشی را فراخوانی نمی کند.

مثال زیر نحوه ایجاد یک واکشی نشانه احراز هویت را نشان می دهد:

جاوا اسکریپت

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 داده شده است. ExpiresInSeconds.
• همانطور که در مثال نشان داده شده است، واکشی نشانه احراز هویت باید زمان انقضا (بر حسب ثانیه، از زمان واکشی) را به کتابخانه منتقل کند.
• SERVER_TOKEN_URL به پیاده‌سازی باطن شما بستگی دارد، اینها نشانی‌های وب برای نمونه برنامه پشتیبان هستند:
  • https:// SERVER_URL /token/delivery_driver/ DELIVERY_VEHICLE_ID
  • https:// SERVER_URL /token/delivery_consumer/ TRACKING_ID
  • https:// SERVER_URL /token/fleet_reader

یک نقشه از HTML بارگیری کنید

مثال زیر نحوه بارگیری کتابخانه جاوا اسکریپت Journey Sharing را از یک URL مشخص نشان می دهد. پارامتر callback تابع initMap را پس از بارگیری API اجرا می کند. ویژگی defer به مرورگر اجازه می‌دهد تا زمانی که API بارگیری می‌شود، بقیه صفحه شما را رندر کند.

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

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

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

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

کتابخانه جاوا اسکریپت Fleet Tracking یک ارائه دهنده مکان را برای API Fleet Engine Deliveries از پیش تعریف می کند. از شناسه پروژه خود و یک مرجع به کارخانه توکن خود برای نمونه سازی آن استفاده کنید.

جاوا اسکریپت

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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 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.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

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

به تغییر رویدادها گوش دهید

شما می توانید متا اطلاعات مربوط به یک کار را از شی deliveryVehicle با استفاده از ارائه دهنده مکان بازیابی کنید. اطلاعات متا شامل ETA و مسافت باقی مانده قبل از تحویل یا رها شدن بعدی وسیله نقلیه است. تغییرات در اطلاعات متا باعث یک رویداد به‌روزرسانی می‌شود. مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان می دهد.

جاوا اسکریپت

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

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

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

جاوا اسکریپت

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

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

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

جاوا اسکریپت

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

مشاهده ناوگان تحویل

این بخش نحوه استفاده از کتابخانه جاوا اسکریپت Journey Sharing برای مشاهده ناوگان تحویل را نشان می دهد. قبل از اجرای کد، حتماً کتابخانه را از تابع callback مشخص شده در تگ اسکریپت بارگیری کنید .

ارائه‌دهنده موقعیت مکانی ناوگان تحویل را معرفی کنید

کتابخانه ردیابی ناوگان جاوا اسکریپت یک ارائه‌دهنده موقعیت مکانی را از پیش تعریف می‌کند که چندین وسیله نقلیه را از FleetEngine Deliveries API واکشی می‌کند. از شناسه پروژه خود و همچنین به عنوان مرجعی برای واکشی توکن خود برای نمونه سازی آن استفاده کنید.

جاوا اسکریپت

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

TypeScript

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

deliveryVehicleFilter پرس و جوی مورد استفاده برای فیلتر کردن وسایل نقلیه نمایش داده شده روی نقشه را مشخص می کند. این فیلتر مستقیماً به Fleet Engine منتقل می شود. برای فرمت های پشتیبانی شده به ListDeliveryVehiclesRequest.filter مراجعه کنید.

locationRestriction محدوده نمایش وسایل نقلیه را روی نقشه محدود می کند. همچنین فعال بودن یا نبودن ردیابی موقعیت مکانی را کنترل می کند. ردیابی موقعیت مکانی شروع نمی شود تا زمانی که این تنظیم شود.

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

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

محدوده 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;
    }
  });

به تغییر رویدادها گوش دهید

شما می توانید متا اطلاعات ناوگان را از شی deliveryVehicles با استفاده از ارائه دهنده موقعیت بازیابی کنید. اطلاعات متا شامل ویژگی های وسیله نقلیه مانند وضعیت ناوبری، فاصله باقیمانده و ویژگی های سفارشی است. برای جزئیات بیشتر به اسناد مرجع مراجعه کنید. تغییر به اطلاعات متا باعث یک رویداد به‌روزرسانی می‌شود. مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان می دهد.

جاوا اسکریپت

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

گوش دادن به خطاها

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

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

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

جاوا اسکریپت

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

جاوا اسکریپت

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

ظاهر و احساس نقشه پایه را سفارشی کنید

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

از طراحی نقشه مبتنی بر ابر استفاده کنید

طراحی نقشه‌های مبتنی بر ابر به شما امکان می‌دهد سبک‌های نقشه را برای هر یک از برنامه‌های خود که از Google Maps از کنسول Google Cloud استفاده می‌کنند، بدون نیاز به تغییر در کد خود ایجاد و ویرایش کنید. سبک های نقشه به عنوان شناسه نقشه در پروژه Cloud شما ذخیره می شوند. برای اعمال یک سبک به نقشه جاوا اسکریپت Fleet Tracking خود، هنگام ایجاد JourneySharingMapView یک mapId را مشخص کنید. پس از اینکه JourneySharingMapView نمونه برداری شد، فیلد mapId نمی توان تغییر داد یا اضافه کرد. مثال زیر نشان می دهد که چگونه می توان یک سبک نقشه ایجاد شده قبلی را با شناسه نقشه فعال کرد.

جاوا اسکریپت

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 است.

جاوا اسکریپت

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

از سفارشی سازی نشانگرها استفاده کنید

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

ساده ترین سفارشی سازی این است که یک شی MarkerOptions را مشخص کنید که برای همه نشانگرهای یک نوع اعمال شود. تغییرات مشخص شده در شی بعد از ایجاد هر نشانگر اعمال می شود و هر گزینه پیش فرض را بازنویسی می کند.

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

علاوه بر این، می‌توانید از توابع سفارشی‌سازی برای فیلتر دید نشانگر استفاده کنید. برای انجام این کار، setVisible(false) را روی نشانگر فراخوانی کنید.

با این حال، به دلایل عملکرد، فیلتر کردن را با فیلتر بومی در ارائه‌دهنده مکان، مانند FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter توصیه می‌کنیم. گفتنی است، هنگامی که به عملکرد فیلتر اضافی نیاز دارید، می توانید فیلتر را با استفاده از تابع سفارشی سازی اعمال کنید.

کتابخانه Fleet Tracking پارامترهای سفارشی سازی زیر را ارائه می دهد:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

با استفاده از MarkerOptions استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

با استفاده از توابع سفارشی‌سازی، استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

کنترل کلیک را به نشانگرها اضافه کنید

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

جاوا اسکریپت

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

TypeScript

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

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

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

با کتابخانه ردیابی ناوگان جاوا اسکریپت، می توانید ظاهر و احساس مسیر وسیله نقلیه دنبال شده را روی نقشه سفارشی کنید. کتابخانه یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقی مانده خودرو ایجاد می کند. شما می توانید با تعیین سفارشی سازی های چند خط به اشیاء Polyline استایل دهید. سپس کتابخانه این سفارشی‌سازی‌ها را در دو موقعیت اعمال می‌کند: قبل از افزودن اشیاء به نقشه، و زمانی که داده‌های مورد استفاده برای اشیاء تغییر کرده‌اند.

مشابه سفارشی‌سازی نشانگر، می‌توانید مجموعه‌ای از PolylineOptions را تعیین کنید تا روی همه اشیاء Polyline همسان در هنگام ایجاد یا به‌روزرسانی اعمال شوند.

به همین ترتیب، می توانید یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این عملکرد می تواند استایل هر شی را بر اساس وضعیت فعلی خودرو تغییر دهد. به عنوان مثال، شیء Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.

می توانید با استفاده از پارامترهای ارائه شده در FleetEngineDeliveryVehicleLocationProviderOptions ، سفارشی سازی ها را مشخص کنید. می‌توانید سفارشی‌سازی‌هایی را برای حالت‌های مسیر مختلف در سفر خودرو تنظیم کنید - قبلاً سفر کرده‌اید، فعالانه سفر کرده‌اید یا هنوز سفر نکرده‌اید. پارامترها به شرح زیر است:

• takenPolylineCustomization ، برای مسیری که قبلاً طی شده است.
• activePolylineCustomization ، برای یک مسیر فعال در حال حرکت؛
• remainingPolylineCustomization ، برای مسیری که هنوز طی نشده است.

با استفاده از PolylineOptions استایل اشیاء Polyline را تغییر دهید

مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline را با PolylineOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های چند خطی که قبلاً ذکر شد، استایل هر شی Polyline را سفارشی کنید.

جاوا اسکریپت

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

TypeScript

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

با استفاده از توابع سفارشی سازی، استایل اشیاء Polyline را تغییر دهید

مثال زیر نحوه پیکربندی استایل را برای یک شی Polyline فعال با استفاده از یک تابع سفارشی سازی نشان می دهد. برای سفارشی کردن استایل هر شیء Polyline با استفاده از هر یک از پارامترهای سفارشی سازی چند خطی که قبلا ذکر شد، از این الگو پیروی کنید.

جاوا اسکریپت

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 آن را تنظیم کنید:

جاوا اسکریپت

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

نمایش یک InfoWindow برای نشانگر وسیله نقلیه یا مکان

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

مثال زیر نحوه ایجاد InfoWindow و اتصال آن به نشانگر خودرو را نشان می دهد.

جاوا اسکریپت

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

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

    // 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 delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

اتصالات خودکار را غیرفعال کنید

با غیرفعال کردن نصب خودکار، می‌توانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیش‌بینی‌شده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی نمای نقشه اشتراک گذاری سفر نشان می دهد.

جاوا اسکریپت

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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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>

برای افزودن کتابخانه جاوا اسکریپت Journey Sharing که شامل Fleet Tracking است:

1. کدی را برای کارخانه توکن احراز هویت اضافه کنید.
2. یک ارائه دهنده مکان را در تابع initMap() راه اندازی کنید.
3. نمای نقشه را در تابع initMap() راه اندازی کنید. نمای شامل نقشه است.
4. سفارشی سازی خود را به تابع callback برای مقداردهی اولیه نمای نقشه منتقل کنید.
5. کتابخانه مکان را به بارگذار API اضافه کنید.

مثال زیر تغییراتی که باید انجام شود را نشان می دهد:

<!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 FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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">
    </script>
  </body>
</html>

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

،

کتابخانه ردیابی ناوگان جاوا اسکریپت به شما امکان می دهد مکان خودروها را در ناوگان آنها در زمان واقعی تجسم کنید. این کتابخانه از Deliveries API برای تجسم وسایل نقلیه تحویل و همچنین وظایف استفاده می کند. مانند کتابخانه ردیابی حمل و نقل جاوا اسکریپت ، شامل یک مؤلفه نقشه جاوا اسکریپت است که جایگزینی برای یک موجودیت استاندارد google.maps.Map و اجزای داده برای اتصال با Fleet Engine است.

اجزاء

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

نمای نقشه ردیابی ناوگان

مولفه نمای نقشه ردیابی ناوگان، مکان وسایل نقلیه و وظایف را به تصویر می کشد. اگر مسیر یک وسیله نقلیه مشخص باشد، مؤلفه نمای نقشه آن وسیله نقلیه را در حالی که در مسیر پیش بینی شده خود حرکت می کند، متحرک می کند.

ارائه دهندگان موقعیت مکانی

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

ارائه دهنده مکان وسیله نقلیه تحویل

ارائه‌دهنده مکان وسیله نقلیه تحویل، اطلاعات موقعیت مکانی یک وسیله نقلیه تحویلی را نمایش می‌دهد. دارای اطلاعاتی در مورد مکان وسیله نقلیه و همچنین وظایفی است که توسط وسیله نقلیه تحویل انجام شده است.

ارائه دهنده مکان ناوگان تحویل

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

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

این بخش قوانین دید برای اشیاء مکان ردیابی شده روی نقشه را برای ارائه دهنده مکان از پیش تعریف شده Fleet Engine توضیح می دهد. ارائه دهندگان مکان سفارشی یا مشتق شده ممکن است قوانین دید را تغییر دهند.

وسایل نقلیه تحویل

وسیله نقلیه تحویلی به محض ایجاد در Fleet Engine قابل مشاهده است و بدون توجه به وظایفش در سراسر مسیر قابل مشاهده است.

نشانگرهای محل کار

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

محل نتایج کار با نشانگرهای نتیجه کار نمایش داده می شود. وظایف با نتیجه SUCCEEDED با نشانگرهای کار موفق نمایش داده می شوند، در حالی که همه وظایف دیگر با نشانگرهای کار ناموفق نمایش داده می شوند.

با کتابخانه ردیابی ناوگان جاوا اسکریپت شروع کنید

قبل از استفاده از کتابخانه جاوا اسکریپت Fleet Tracking مطمئن شوید که با Fleet Engine و دریافت کلید API آشنا هستید. سپس یک شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید.

یک شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید

برای ردیابی وسایل نقلیه تحویل با استفاده از ارائه‌دهنده مکان وسیله نقلیه تحویل ، یک رمز وب JSON (JWT) با شناسه وظیفه و ادعای شناسه وسیله نقلیه تحویل ایجاد کنید.

برای ایجاد بار JWT، یک ادعای اضافی در بخش مجوز با کلیدهای taskid و deliveryvehicleid اضافه کنید و مقدار هر کلید را روی * تنظیم کنید. توکن باید با استفاده از نقش Super User Cloud IAM Fleet Engine Service ایجاد شود. توجه داشته باشید که این امکان دسترسی گسترده به ایجاد، خواندن و اصلاح موجودیت‌های Fleet Engine را می‌دهد و فقط باید با کاربران قابل اعتماد به اشتراک گذاشته شود.

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

یک واکشی نشانه احراز هویت ایجاد کنید

می‌توانید یک واکشی توکن احراز هویت ایجاد کنید تا با استفاده از یک گواهی حساب سرویس برای پروژه خود ، توکنی را که با ادعاهای مناسب بر روی سرورهای خود ضرب شده است، بازیابی کنید. مهم است که فقط توکن ها را در سرورهای خود برش دهید و هرگز گواهی های خود را در هیچ کلاینت به اشتراک نگذارید. در غیر این صورت، امنیت سیستم خود را به خطر خواهید انداخت.

واکشی باید یک ساختار داده با دو فیلد را که در یک Promise پیچیده شده است برگرداند:

• یک token رشته
• یک عدد expiresInSeconds . یک توکن در این مدت پس از واکشی منقضی می شود.

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

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

در غیر این صورت، کتابخانه از رمز صادر شده قبلی استفاده می کند و هنوز معتبر است و واکشی را فراخوانی نمی کند.

مثال زیر نحوه ایجاد یک واکشی نشانه احراز هویت را نشان می دهد:

جاوا اسکریپت

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 داده شده است. ExpiresInSeconds.
• همانطور که در مثال نشان داده شده است، واکشی نشانه احراز هویت باید زمان انقضا (بر حسب ثانیه، از زمان واکشی) را به کتابخانه منتقل کند.
• SERVER_TOKEN_URL به پیاده‌سازی باطن شما بستگی دارد، اینها نشانی‌های وب برای نمونه برنامه پشتیبان هستند:
  • https:// SERVER_URL /token/delivery_driver/ DELIVERY_VEHICLE_ID
  • https:// SERVER_URL /token/delivery_consumer/ TRACKING_ID
  • https:// SERVER_URL /token/fleet_reader

یک نقشه از HTML بارگیری کنید

مثال زیر نحوه بارگیری کتابخانه جاوا اسکریپت Journey Sharing را از یک URL مشخص نشان می دهد. پارامتر callback تابع initMap را پس از بارگیری API اجرا می کند. ویژگی defer به مرورگر اجازه می‌دهد تا زمانی که API بارگیری می‌شود، بقیه صفحه شما را رندر کند.

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

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

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

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

کتابخانه جاوا اسکریپت Fleet Tracking یک ارائه دهنده مکان را برای API Fleet Engine Deliveries از پیش تعریف می کند. از شناسه پروژه خود و یک مرجع به کارخانه توکن خود برای نمونه سازی آن استفاده کنید.

جاوا اسکریپت

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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 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.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

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

به تغییر رویدادها گوش دهید

شما می توانید متا اطلاعات مربوط به یک کار را از شی deliveryVehicle با استفاده از ارائه دهنده مکان بازیابی کنید. اطلاعات متا شامل ETA و مسافت باقی مانده قبل از تحویل یا رها شدن بعدی وسیله نقلیه است. تغییرات در اطلاعات متا باعث یک رویداد به‌روزرسانی می‌شود. مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان می دهد.

جاوا اسکریپت

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

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

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

جاوا اسکریپت

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

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

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

جاوا اسکریپت

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

مشاهده ناوگان تحویل

این بخش نحوه استفاده از کتابخانه جاوا اسکریپت Journey Sharing برای مشاهده ناوگان تحویل را نشان می دهد. قبل از اجرای کد، حتماً کتابخانه را از تابع callback مشخص شده در تگ اسکریپت بارگیری کنید .

ارائه‌دهنده موقعیت مکانی ناوگان تحویل را معرفی کنید

کتابخانه ردیابی ناوگان جاوا اسکریپت یک ارائه‌دهنده موقعیت مکانی را از پیش تعریف می‌کند که چندین وسیله نقلیه را از FleetEngine Deliveries API واکشی می‌کند. از شناسه پروژه خود و همچنین به عنوان مرجعی برای واکشی توکن خود برای نمونه سازی آن استفاده کنید.

جاوا اسکریپت

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

TypeScript

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

deliveryVehicleFilter پرس و جوی مورد استفاده برای فیلتر کردن وسایل نقلیه نمایش داده شده روی نقشه را مشخص می کند. این فیلتر مستقیماً به Fleet Engine منتقل می شود. برای فرمت های پشتیبانی شده به ListDeliveryVehiclesRequest.filter مراجعه کنید.

locationRestriction محدوده نمایش وسایل نقلیه را روی نقشه محدود می کند. همچنین فعال بودن یا نبودن ردیابی موقعیت مکانی را کنترل می کند. ردیابی موقعیت مکانی شروع نمی شود تا زمانی که این تنظیم شود.

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

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

محدوده 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;
    }
  });

به تغییر رویدادها گوش دهید

شما می توانید متا اطلاعات ناوگان را از شی deliveryVehicles با استفاده از ارائه دهنده موقعیت بازیابی کنید. اطلاعات متا شامل ویژگی های وسیله نقلیه مانند وضعیت ناوبری، فاصله باقی مانده و ویژگی های سفارشی است. برای جزئیات بیشتر به اسناد مرجع مراجعه کنید. تغییر به اطلاعات متا باعث یک رویداد به‌روزرسانی می‌شود. مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان می دهد.

جاوا اسکریپت

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

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

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

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

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

جاوا اسکریپت

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

جاوا اسکریپت

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

جاوا اسکریپت

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

ظاهر و احساس نقشه پایه را سفارشی کنید

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

از طراحی نقشه مبتنی بر ابر استفاده کنید

طراحی نقشه‌های مبتنی بر ابر به شما امکان می‌دهد سبک‌های نقشه را برای هر یک از برنامه‌های خود که از Google Maps از کنسول Google Cloud استفاده می‌کنند، بدون نیاز به تغییر در کد خود ایجاد و ویرایش کنید. سبک های نقشه به عنوان شناسه نقشه در پروژه Cloud شما ذخیره می شوند. برای اعمال یک سبک به نقشه جاوا اسکریپت Fleet Tracking خود، هنگام ایجاد JourneySharingMapView یک mapId را مشخص کنید. پس از اینکه JourneySharingMapView نمونه برداری شد، فیلد mapId نمی توان تغییر داد یا اضافه کرد. مثال زیر نشان می دهد که چگونه می توان یک سبک نقشه ایجاد شده قبلی را با شناسه نقشه فعال کرد.

جاوا اسکریپت

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 است.

جاوا اسکریپت

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

از سفارشی سازی نشانگرها استفاده کنید

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

ساده ترین سفارشی سازی این است که یک شی MarkerOptions را مشخص کنید که برای همه نشانگرهای یک نوع اعمال شود. تغییرات مشخص شده در شی بعد از ایجاد هر نشانگر اعمال می شود و هر گزینه پیش فرض را بازنویسی می کند.

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

علاوه بر این، می‌توانید از توابع سفارشی‌سازی برای فیلتر دید نشانگر استفاده کنید. برای انجام این کار، setVisible(false) را روی نشانگر فراخوانی کنید.

با این حال، به دلایل عملکرد، فیلتر کردن را با فیلتر بومی در ارائه‌دهنده مکان، مانند FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter توصیه می‌کنیم. گفتنی است، هنگامی که به عملکرد فیلتر اضافی نیاز دارید، می توانید فیلتر را با استفاده از تابع سفارشی سازی اعمال کنید.

کتابخانه Fleet Tracking پارامترهای سفارشی سازی زیر را ارائه می دهد:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

با استفاده از MarkerOptions استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

با استفاده از توابع سفارشی‌سازی، استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

کنترل کلیک را به نشانگرها اضافه کنید

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

جاوا اسکریپت

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

TypeScript

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

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

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

با کتابخانه ردیابی ناوگان جاوا اسکریپت، می توانید ظاهر و احساس مسیر وسیله نقلیه دنبال شده را روی نقشه سفارشی کنید. کتابخانه یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقی مانده خودرو ایجاد می کند. شما می توانید با تعیین سفارشی سازی های چند خط به اشیاء Polyline استایل دهید. سپس کتابخانه این سفارشی‌سازی‌ها را در دو موقعیت اعمال می‌کند: قبل از افزودن اشیاء به نقشه، و زمانی که داده‌های مورد استفاده برای اشیاء تغییر کرده‌اند.

مشابه سفارشی‌سازی نشانگر، می‌توانید مجموعه‌ای از PolylineOptions را تعیین کنید تا روی همه اشیاء Polyline همسان در هنگام ایجاد یا به‌روزرسانی اعمال شوند.

به همین ترتیب، می توانید یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این عملکرد می تواند استایل هر شی را بر اساس وضعیت فعلی خودرو تغییر دهد. به عنوان مثال، شیء Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.

می توانید با استفاده از پارامترهای ارائه شده در FleetEngineDeliveryVehicleLocationProviderOptions ، سفارشی سازی ها را مشخص کنید. می‌توانید سفارشی‌سازی‌هایی را برای حالت‌های مسیر مختلف در سفر خودرو تنظیم کنید - قبلاً سفر کرده‌اید، فعالانه سفر کرده‌اید یا هنوز سفر نکرده‌اید. پارامترها به شرح زیر است:

• takenPolylineCustomization ، برای مسیری که قبلاً طی شده است.
• activePolylineCustomization ، برای یک مسیر فعال در حال حرکت؛
• remainingPolylineCustomization ، برای مسیری که هنوز طی نشده است.

با استفاده از PolylineOptions استایل اشیاء Polyline را تغییر دهید

مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline را با PolylineOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های چند خطی که قبلاً ذکر شد، استایل هر شی Polyline را سفارشی کنید.

جاوا اسکریپت

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

TypeScript

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

با استفاده از توابع سفارشی سازی، استایل اشیاء Polyline را تغییر دهید

مثال زیر نحوه پیکربندی استایل را برای یک شی Polyline فعال با استفاده از یک تابع سفارشی سازی نشان می دهد. برای سفارشی کردن استایل هر شیء Polyline با استفاده از هر یک از پارامترهای سفارشی سازی چند خطی که قبلا ذکر شد، از این الگو پیروی کنید.

جاوا اسکریپت

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 آن را تنظیم کنید:

جاوا اسکریپت

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

نمایش یک InfoWindow برای نشانگر وسیله نقلیه یا مکان

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

مثال زیر نحوه ایجاد InfoWindow و اتصال آن به نشانگر خودرو را نشان می دهد.

جاوا اسکریپت

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

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

    // 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 delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

اتصالات خودکار را غیرفعال کنید

با غیرفعال کردن نصب خودکار، می‌توانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیش‌بینی‌شده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی نمای نقشه اشتراک گذاری سفر نشان می دهد.

جاوا اسکریپت

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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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>

برای افزودن کتابخانه جاوا اسکریپت Journey Sharing که شامل Fleet Tracking است:

1. کدی را برای کارخانه توکن احراز هویت اضافه کنید.
2. یک ارائه دهنده مکان را در تابع initMap() راه اندازی کنید.
3. نمای نقشه را در تابع initMap() راه اندازی کنید. نمای شامل نقشه است.
4. سفارشی سازی خود را به تابع callback برای مقداردهی اولیه نمای نقشه منتقل کنید.
5. کتابخانه مکان را به بارگذار API اضافه کنید.

مثال زیر تغییراتی که باید انجام شود را نشان می دهد:

<!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 FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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">
    </script>
  </body>
</html>

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