इस सेक्शन में, ऑन-डिमांड यात्राओं या शेड्यूल किए गए टास्क के लिए वाहन को ट्रैक करने के लिए, 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);