این بخش نحوه استفاده از کتابخانه ردیابی ناوگان جاوا اسکریپت را برای ردیابی وسیله نقلیه برای سفرهای درخواستی یا کارهای برنامه ریزی شده نشان میدهد.
برای ردیابی وسیله نقلیه، مراحل زیر را انجام دهید:
- کتابخانه را بارگذاری کنید و نمای نقشه را مقداردهی اولیه کنید
- موقعیت مکانی خودرو و نمای نقشه را ارائه دهید
- به رویدادها گوش دهید و خطاها را مدیریت کنید
- توقف ردیابی
کتابخانه را بارگذاری کنید و نمای نقشه را مقداردهی اولیه کنید
برای نمایش عملیات ناوگان خود بر روی نقشه در صفحه وب خود، از اسکریپتی استفاده کنید که با استفاده از کلید API شما، نقشه را فراخوانی میکند. مثال زیر نحوه انجام این کار را از طریق HTML نشان میدهد:
منبع URL : با استفاده از کلید API شما، API نقشههای گوگل را فراخوانی میکند تا یک نقشه درخواست کند.
پارامتر
callback: تابعinitMapرا پس از اینکه API فراخوانی را برمیگرداند، اجرا میکند.پارامتر
libraries: کتابخانه ردیابی ناوگان را بارگذاری میکند.ویژگی
defer: به مرورگر اجازه میدهد تا در حین بارگذاری API، به رندر کردن بقیه صفحه ادامه دهد.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
موقعیت مکانی خودرو و نمای نقشه را ارائه دهید
برای شروع ردیابی یک وسیله نقلیه، شما هم یک ارائه دهنده موقعیت مکانی وسیله نقلیه را معرفی میکنید و هم یک نمای نقشه با شناسه وسیله نقلیه را همانطور که در بخشهای بعدی توضیح داده شده است، مقداردهی اولیه میکنید.
یک ارائه دهنده موقعیت مکانی خودرو را نمونهسازی کنید
کتابخانه ردیابی ناوگان جاوا اسکریپت شامل یک ارائه دهنده موقعیت مکانی برای API موتور ناوگان است. از شناسه پروژه خود و یک مرجع به گیرنده توکن خود برای نمونهسازی آن، همانطور که در مثالهای زیر نشان داده شده است، استفاده کنید.
سفرهای درخواستی
جاوا اسکریپت
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
تایپ اسکریپت
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
وظایف برنامهریزیشده
جاوا اسکریپت
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
تایپ اسکریپت
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
مقداردهی اولیه نمای نقشه
پس از بارگذاری کتابخانه جاوا اسکریپت Journey Sharing، نمای نقشه را مقداردهی اولیه کرده و آن را به صفحه HTML اضافه کنید. صفحه شما باید حاوی یک عنصر <div> باشد که نمای نقشه را در خود جای میدهد. عنصر <div> در مثالهای زیر map_canvas نام دارد.
سفرهای درخواستی
جاوا اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
تایپ اسکریپت
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);
تایپ اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
به رویدادها گوش دهید و خطاها را مدیریت کنید
زمانی که ردیابی یک وسیله نقلیه را شروع کردید، میخواهید پیشرفت آن را روی نقشه بهروزرسانی کنید و خطاهایی را که هنگام حرکت وسیله نقلیه در طول مسیر رخ میدهد، مدیریت کنید.
به رویدادهای خودرو گوش دهید
برای پیگیری پیشرفت یک وسیله نقلیه برای سفرهای درخواستی یا وظایف برنامهریزیشده، باید به رویدادهای تغییر گوش دهید.
شما با استفاده از ارائه دهنده مکان، متا را از شیء vehicle یا deliveryVehicle بازیابی میکنید. اطلاعات متا شامل ETA و مسافت باقی مانده قبل از سوار یا پیاده شدن بعدی وسیله نقلیه است. تغییرات در اطلاعات متا باعث ایجاد یک رویداد بهروزرسانی در ارائه دهنده مکان میشود.
مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان میدهد.
سفرهای درخواستی
جاوا اسکریپت
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
تایپ اسکریپت
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
وظایف برنامهریزیشده
جاوا اسکریپت
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
تایپ اسکریپت
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
مدیریت خطاها
پس از بارگذاری کتابخانه جاوا اسکریپت Journey Sharing، نمای نقشه را مقداردهی اولیه کرده و آن را به صفحه HTML اضافه کنید. صفحه شما باید حاوی یک عنصر <div> باشد که نمای نقشه را در خود جای میدهد. عنصر <div> در مثالهای زیر map_canvas نام دارد.
سفرهای درخواستی
جاوا اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
تایپ اسکریپت
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);
تایپ اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
توقف ردیابی وسیله نقلیه
برای متوقف کردن ردیابی یک وسیله نقلیه، باید آن را از ارائه دهنده موقعیت مکانی حذف کنید و ارائه دهنده موقعیت مکانی را از نمای نقشه همانطور که در بخشهای بعدی توضیح داده شده است، حذف کنید. مثالهای اینجا هم برای سفرهای درخواستی و هم برای پیادهسازی وظایف زمانبندی شده اعمال میشود.
حذف وسیله نقلیه از ارائه دهنده مکان
برای جلوگیری از ردیابی وسیله نقلیه توسط ارائه دهنده موقعیت مکانی، شناسه وسیله نقلیه تحویل را از ارائه دهنده موقعیت مکانی حذف کنید.
سفرهای درخواستی
جاوا اسکریپت
locationProvider.vehicleId = '';
تایپ اسکریپت
locationProvider.vehicleId = '';
وظایف برنامهریزیشده
جاوا اسکریپت
locationProvider.deliveryVehicleId = '';
تایپ اسکریپت
locationProvider.deliveryVehicleId = '';
ارائه دهنده موقعیت مکانی را از نمای نقشه حذف کنید
مثال زیر نحوه حذف یک ارائه دهنده موقعیت مکانی از نمای نقشه را نشان میدهد.
جاوا اسکریپت
mapView.removeLocationProvider(locationProvider);
تایپ اسکریپت
mapView.removeLocationProvider(locationProvider);