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