वाहन को ट्रैक करें

इस सेक्शन में JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल करके, मांग पर यात्राओं या शेड्यूल किए गए टास्क के लिए वाहन.

वाहन को ट्रैक करने के लिए, यह तरीका अपनाएं:

  1. लाइब्रेरी को लोड करें और मैप व्यू शुरू करें
  2. वाहन की जगह की जानकारी और मैप व्यू की जानकारी देना
  3. इवेंट सुनें और गड़बड़ियां ठीक करें
  4. ट्रैकिंग बंद करना

लाइब्रेरी लोड करें और मैप व्यू शुरू करें

अपने वेब पेज पर, मैप पर अपने सभी डिवाइसों की कार्रवाइयां दिखाने के लिए, इसका इस्तेमाल करें एक स्क्रिप्ट जो आपके एपीआई पासकोड का इस्तेमाल करके मैप को कॉल करती है. नीचे दिए गए उदाहरण में बताया गया है कि एचटीएमएल से यह काम करने के लिए:

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

मांग पर यात्राएं

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

आगे क्या करना है