इस सेक्शन में, मांग पर की जाने वाली यात्राओं या शेड्यूल किए गए टास्क के लिए किसी वाहन को ट्रैक करने के लिए, 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
ऑब्जेक्ट से मेटा डेटा वापस पाया जाता है. मेटा जानकारी में, वाहन के अगले पिकअप या ड्रॉपऑफ़ से पहले पहुंचने का अनुमानित समय और बची हुई दूरी शामिल होती है. मेटा जानकारी में किए गए बदलावों से, जगह की जानकारी देने वाली सेवा में अपडेट इवेंट ट्रिगर होता है.
नीचे दिए गए उदाहरण में, बदलाव से जुड़े इन इवेंट को सुनने का तरीका बताया गया है.
मांग के हिसाब से यात्राएं
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);