सभी डिवाइसों को देखना

इस सेक्शन में, JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल करके, फ़्लीट देखने का तरीका बताया गया है. इन तरीकों को लागू करने के लिए, यह ज़रूरी है कि आपने फ़्लीट ट्रैकिंग लाइब्रेरी सेट अप की हो और मैप लोड किया हो. ज़्यादा जानकारी के लिए, JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी सेट अप करना लेख पढ़ें.

इस दस्तावेज़ में उन चीज़ों के बारे में बताया गया है जो फ़्लीट देखते समय की जा सकती हैं:

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

फ़्लीट को ट्रैक करना शुरू करना

फ़्लीट को ट्रैक करने के लिए, आपको फ़्लीट की जगह की जानकारी देने वाली सेवा को इंस्टैंशिएट करना होगा. साथ ही, मैप व्यूपोर्ट के लिए जगह की जानकारी से जुड़ी पाबंदियां सेट करनी होंगी. इसके बारे में यहां दिए गए सेक्शन में बताया गया है.

फ़्लीट की जगह की जानकारी देने वाली सेवा को इंस्टैंशिएट करना

JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी में, जगह की जानकारी देने वाली सेवा शामिल होती है. यह सेवा, Fleet Engine से कई वाहनों की जानकारी फ़ेच करती है.

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

1. अपने प्रोजेक्ट आईडी के साथ-साथ, टोकन फ़ेचर का रेफ़रंस भी इस्तेमाल करें.

2. वाहन के लिए फ़िल्टर क्वेरी का इस्तेमाल करना वाहन के लिए फ़िल्टर क्वेरी से यह कंट्रोल किया जाता है कि मैप पर कौनसे वाहन दिखें. फ़िल्टर को Fleet Engine में पास किया जाता है.

   • मांग पर उपलब्ध सेवाओं के लिए, vehicleFilter का इस्तेमाल करें और ListVehiclesRequest.filter देखें
   • शेड्यूल किए गए टास्क के लिए, deliveryVehicleFilter का इस्तेमाल करें और ListDeliveryVehiclesRequest.filter की समीक्षा करें

3. वाहन के डिसप्ले के लिए बाउंडिंग बॉक्स सेट करें. मैप पर वाहनों को दिखाने के लिए, locationRestriction का इस्तेमाल करके इलाके की सीमा तय करें. यह सेट होने तक, जगह की जानकारी देने वाली सेवा चालू नहीं होती. जगह की सीमाएं, कंस्ट्रक्टर में या कंस्ट्रक्टर के बाद सेट की जा सकती हैं.

4. मैप व्यू को शुरू करना.

यहां दिए गए उदाहरणों में, मांग पर और शेड्यूल किए गए टास्क, दोनों के लिए फ़्लीट की जगह की जानकारी देने वाली सेवा को इंस्टैंशिएट करने का तरीका बताया गया है. इन उदाहरणों से यह भी पता चलता है कि लोकेशन प्रोवाइडर को चालू करने के लिए, कंस्ट्रक्टर में locationRestriction का इस्तेमाल कैसे किया जाता है.

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

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

शेड्यूल किए गए टास्क

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

कंस्ट्रक्टर के बाद locationRestriction सेट करने के लिए, अपने कोड में बाद में locationProvider.locationRestriction जोड़ें. इसके लिए, JavaScript का यह उदाहरण देखें.

ध्यान दें: यह उदाहरण, शेड्यूल किए गए टास्क के लिए है. हालांकि, मांग पर ट्रिप के लिए ऐसा करने के लिए, आपको बस google.maps.journeySharing.FleetEngineFleetLocationProvider का इस्तेमाल करना होगा.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

मैप व्यूपोर्ट का इस्तेमाल करके, जगह के हिसाब से पाबंदी सेट करना

मैप व्यू में अभी दिख रहे इलाके से मैच करने के लिए, locationRestriction की सीमाएं भी सेट की जा सकती हैं.

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

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

शेड्यूल किए गए टास्क

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

मैप व्यू को शुरू करना

जगह की जानकारी देने वाली सेवा को सेट अप करने के बाद, मैप व्यू को उसी तरह शुरू करें जिस तरह किसी एक वाहन को फ़ॉलो करते समय किया जाता है.

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.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

शेड्यूल किए गए टास्क

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

गड़बड़ियों पर ध्यान देना

आपको किसी वाहन को फ़ॉलो करते समय होने वाली गड़बड़ियों को सुनना और उन्हें ठीक करना होगा. वाहन की जानकारी का अनुरोध करने पर, एसिंक्रोनस तरीके से होने वाली गड़बड़ियों की वजह से, गड़बड़ी वाले इवेंट ट्रिगर होते हैं.

यहां दिए गए उदाहरण में, इन इवेंट को सुनने का तरीका बताया गया है, ताकि गड़बड़ियों को ठीक किया जा सके.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

फ़्लीट को ट्रैक करना बंद करना

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

जगह की जानकारी देने वाली सेवा की सीमाओं को शून्य पर सेट करना

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

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

शेड्यूल किए गए टास्क

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाना

यहां दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली सेवा को हटाने का तरीका बताया गया है.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

डिलीवरी फ़्लीट देखते समय, डिलीवरी वाहन को ट्रैक करना

अगर शेड्यूल किए गए टास्क के लिए, मोबिलिटी सेवाओं का इस्तेमाल किया जा रहा है, तो मैप के उसी व्यू में, वाहनों के बेड़े को देखा जा सकता है. साथ ही, डिलीवरी करने वाले किसी वाहन के लिए, रास्ता और आने वाले टास्क देखे जा सकते हैं. ऐसा करने के लिए, डिलीवरी फ़्लीट की जगह की जानकारी देने वाले और डिलीवरी वाहन की जगह की जानकारी देने वाले, दोनों प्रोवाइडर को इंस्टैंशिएट करें. साथ ही, दोनों को मैप व्यू में जोड़ें. इंस्टैंशिएट होने के बाद, डिलीवरी फ़्लीट की जगह की जानकारी देने वाली सेवा, मैप पर डिलीवरी वाहनों को दिखाना शुरू कर देती है. यहां दिए गए उदाहरणों में, जगह की जानकारी देने वाली दोनों सेवाओं को इंस्टैंशिएट करने का तरीका बताया गया है:

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

डिलीवरी वाहन को ट्रैक करने के लिए, मार्कर को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करना

डिलीवरी वाहन की जगह की जानकारी देने वाली सेवा को चालू करने के लिए, ताकि डिलीवरी वाहन को ट्रैक किया जा सके जब आप उसके फ़्लीट मार्कर पर क्लिक करें, तो यह तरीका अपनाएं:

1. मार्कर को पसंद के मुताबिक बनाएं और क्लिक करने पर होने वाली कार्रवाई जोड़ें.

2. डुप्लीकेट मार्कर से बचने के लिए, मार्कर को छिपाएं.

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

इन चरणों के उदाहरण यहां दिए गए हैं.

मार्कर को पसंद के मुताबिक बनाना और क्लिक करने पर होने वाली कार्रवाई जोड़ना

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

डुप्लीकेट मार्कर से बचने के लिए, मार्कर को छिपाएं

डिलीवरी वाहन की जगह की जानकारी देने वाली सेवा से मार्कर को छिपाएं, ताकि एक ही वाहन के लिए दो मार्कर रेंडर न हों:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

• मैप की स्टाइल तय करना