इस सेक्शन में, JavaScript फ्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल करके, मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राओं या शेड्यूल किए गए टास्क के लिए किसी वाहन को ट्रैक करने का तरीका बताया गया है.
किसी वाहन को ट्रैक करने के लिए, यह तरीका अपनाएं:
- लाइब्रेरी लोड करें और मैप व्यू को शुरू करें
- वाहन की जगह की जानकारी और मैप व्यू उपलब्ध कराएं
- इवेंट लिसनर का इस्तेमाल करें और गड़बड़ियां ठीक करें
- ट्रैकिंग बंद करें
लाइब्रेरी लोड करें और मैप व्यू को शुरू करें
अपने वेब पेज पर, फ्लीट के ऑपरेशन को मैप पर दिखाने के लिए, ऐसा स्क्रिप्ट इस्तेमाल करें जो आपके एपीआई पासकोड का इस्तेमाल करके मैप को कॉल करता हो. यहां दिए गए उदाहरण में, एचटीएमएल से ऐसा करने का तरीका बताया गया है:
यूआरएल सोर्स: आपके एपीआई पासकोड का इस्तेमाल करके, मैप का अनुरोध करने के लिए, Google Maps API को कॉल करता है.
callbackपैरामीटर: एपीआई के कॉल वापस करने के बाद,initMapफ़ंक्शन को चलाता है.librariesपैरामीटर: फ्लीट ट्रैकिंग लाइब्रेरी लोड करता है.deferएट्रिब्यूट: एपीआई लोड होने के दौरान, ब्राउज़र को आपके पेज के बाकी हिस्से को रेंडर करने की अनुमति देता है.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
वाहन की जगह की जानकारी और मैप व्यू उपलब्ध कराएं
किसी वाहन को ट्रैक करने के लिए, आपको वाहन की जगह की जानकारी देने वाली सुविधा का इंस्टेंस बनाना होगा. साथ ही, वाहन के आईडी के साथ मैप व्यू को शुरू करना होगा. इसके बारे में, अगले सेक्शन में बताया गया है.
वाहन की जगह की जानकारी देने वाली सुविधा का इंस्टेंस बनाना
JavaScript फ्लीट ट्रैकिंग लाइब्रेरी में, Fleet Engine API के लिए जगह की जानकारी देने वाली सुविधा शामिल होती है. इसे शुरू करने के लिए, अपने प्रोजेक्ट आईडी और टोकन फ़ेचर के रेफ़रंस का इस्तेमाल करें. इसके बारे में, यहां दिए गए उदाहरणों में बताया गया है.
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राएं
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
शेड्यूल किए गए टास्क
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
मैप व्यू को शुरू करना
JavaScript Journey Sharing लाइब्रेरी लोड करने के बाद, मैप व्यू को शुरू करें और उसे एचटीएमएल पेज में जोड़ें. आपके पेज में एक <div> एलिमेंट होना चाहिए, जिसमें मैप व्यू शामिल हो. यहां दिए गए उदाहरणों में, <div> एलिमेंट का नाम map_canvas है.=
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राएं
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
शेड्यूल किए गए टास्क
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
इवेंट लिसनर का इस्तेमाल करें और गड़बड़ियां ठीक करें
किसी वाहन को ट्रैक करने के बाद, आपको मैप पर उसकी प्रोग्रेस अपडेट करनी होगी. साथ ही, वाहन के रास्ते में आने वाली गड़बड़ियों को ठीक करना होगा.
वाहन की हलचल का पता लगाने वाली सुविधा के इवेंट लिसनर का इस्तेमाल करना
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राओं या शेड्यूल किए गए टास्क के लिए, किसी वाहन की प्रोग्रेस को ट्रैक करने के लिए, आपको बदलाव के इवेंट लिसनर का इस्तेमाल करना होगा.
जगह की जानकारी देने वाली सुविधा का इस्तेमाल करके, vehicle या deliveryVehicle ऑब्जेक्ट से मेटाडेटा वापस पाया जा सकता है. मेटाडेटा में, वाहन के अगले पिकअप या ड्रॉपऑफ़ से पहले ईटीए और बची हुई दूरी शामिल होती है. मेटाडेटा में होने वाले बदलावों से, जगह की जानकारी देने वाली सुविधा में update इवेंट ट्रिगर होता है.
यहां दिए गए उदाहरण में, बदलाव के इन इवेंट लिसनर का इस्तेमाल करने का तरीका बताया गया है.
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राएं
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
शेड्यूल किए गए टास्क
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
गड़बड़ियां ठीक करना
JavaScript Journey Sharing लाइब्रेरी लोड करने के बाद, मैप व्यू को शुरू करें और उसे एचटीएमएल पेज में जोड़ें. आपके पेज में एक <div> एलिमेंट होना चाहिए, जिसमें मैप व्यू शामिल हो. यहां दिए गए उदाहरणों में, <div> एलिमेंट का नाम map_canvas है.=
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राएं
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
शेड्यूल किए गए टास्क
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
किसी वाहन को ट्रैक करना बंद करना
किसी वाहन को ट्रैक करना बंद करने के लिए, आपको उसे जगह की जानकारी देने वाली सुविधा से हटाना होगा. साथ ही, मैप व्यू से जगह की जानकारी देने वाली सुविधा को हटाना होगा. इसके बारे में, अगले सेक्शन में बताया गया है. यहां दिए गए उदाहरण, मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राओं और शेड्यूल किए गए टास्क, दोनों पर लागू होते हैं.
जगह की जानकारी देने वाली सुविधा से किसी वाहन को हटाना
जगह की जानकारी देने वाली सुविधा से किसी वाहन को ट्रैक करना बंद करने के लिए, डिलीवरी वाहन का आईडी, जगह की जानकारी देने वाली सुविधा से हटाएं.
मांग के हिसाब से उपलब्ध कराई जाने वाली यात्राएं
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
शेड्यूल किए गए टास्क
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
मैप व्यू से जगह की जानकारी देने वाली सुविधा को हटाना
यहां दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली सुविधा को हटाने का तरीका बताया गया है.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);