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

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);
    }
  };

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

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