मार्कर कस्टमाइज़ करें

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

1. टाइप के आधार पर मार्कर की स्टाइल तय करना: एक ही टाइप के मार्कर की स्टाइल तय करने के लिए, MarkerOptions ऑब्जेक्ट तय करें. आपके तय किए गए बदलाव, हर मार्कर के बनने के बाद लागू होते हैं. साथ ही, डिफ़ॉल्ट विकल्पों को बदल देते हैं. उदाहरण के लिए, इस गाइड में टाइप के आधार पर मार्कर की स्टाइल तय करना देखें.

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

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

   • बाहरी सोर्स: फ़्लीट ट्रैकिंग के डेटा को, Fleet Engine के बाहर के सोर्स से मिले डेटा के साथ जोड़ा जा सकता है. साथ ही, उस जानकारी के आधार पर मार्कर की स्टाइल तय की जा सकती है.

   उदाहरण के लिए, डेटा के आधार पर मार्कर की स्टाइल तय करना देखें.

3. मार्कर में क्लिक हैंडलिंग जोड़ना: उदाहरण के लिए, क्लिक हैंडलिंग जोड़ना देखें.

4. फ़िल्टर करना कि कौनसे मार्कर दिखें: फ़िल्टर करें कि JavaScript के लोकेशन प्रोवाइडर में उपलब्ध फ़िल्टर करने की सुविधाओं की मदद से, कौनसे मार्कर दिखें. उदाहरण के लिए:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   ध्यान दें: मार्कर की दिखने की सेटिंग को, पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके भी फ़िल्टर किया जा सकता है. हालांकि, इससे परफ़ॉर्मेंस पर असर पड़ सकता है. अगर आपको ऐसा करना ही है, तो मार्कर पर setVisible(false) को कॉल करें. उदाहरण के लिए, देखें फ़िल्टर करना कि कौनसे मार्कर दिखें.

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

मार्कर को पसंद के मुताबिक बनाने के विकल्प

फ़्लीट ट्रैकिंग लाइब्रेरी, मार्कर को पसंद के मुताबिक बनाने के लिए ये पैरामीटर उपलब्ध कराती है:

ऑन-डिमांड ट्रिप को पसंद के मुताबिक बनाने के पैरामीटर

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

शेड्यूल किए गए टास्क को पसंद के मुताबिक बनाने के पैरामीटर

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

टाइप के आधार पर मार्कर की स्टाइल तय करना

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

ऑन-डिमांड ट्रिप का उदाहरण

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

डेटा के आधार पर मार्कर की स्टाइल तय करना

यहां दिए गए उदाहरण में, मार्कर को पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. ऊपर दिए गए मार्कर को पसंद के मुताबिक बनाने के विकल्पों में दिए गए किसी भी विकल्प का इस्तेमाल करके, डेटा के आधार पर किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को फ़ॉलो करें मार्कर को पसंद के मुताबिक बनाने के विकल्प.

ऑन-डिमांड ट्रिप का उदाहरण

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

मार्कर में क्लिक हैंडलिंग जोड़ना

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

ऑन-डिमांड ट्रिप का उदाहरण

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

फ़िल्टर करना कि कौनसे मार्कर दिखें

चेतावनी: अगर आप मार्कर की दिखने की सेटिंग को setVisible का इस्तेमाल करके फ़िल्टर करते हैं, तो परफ़ॉर्मेंस पर असर पड़ सकता है. सबसे सही तरीका यह है कि JavaScript के लोकेशन प्रोवाइडर में उपलब्ध फ़िल्टर करने की सुविधाओं की मदद से, फ़िल्टर करें कि कौनसे मार्कर दिखें.

अगर आपको setVisible का इस्तेमाल करना है, तो ऊपर दिए गए मार्कर को पसंद के मुताबिक बनाने के विकल्पों में दिए गए किसी भी विकल्प का इस्तेमाल करके, किसी भी मार्कर को फ़िल्टर करने के लिए, इस पैटर्न को फ़ॉलो करें.

ऑन-डिमांड ट्रिप का उदाहरण

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

• मैप की स्टाइल तय करना
• पॉलीलाइन को पसंद के मुताबिक बनाना