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

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

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

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

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

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

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

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

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

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

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

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

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

मांग के हिसाब से यात्रा की सुविधा को पसंद के मुताबिक बनाने के पैरामीटर

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

शेड्यूल किए गए टास्क के कस्टम पैरामीटर

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

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

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

मांग के हिसाब से यात्राओं का उदाहरण

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

डेटा के आधार पर मार्कर को स्टाइल करना

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

मांग के हिसाब से यात्राओं का उदाहरण

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

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

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

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

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

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

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

मांग के हिसाब से यात्राओं का उदाहरण

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

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

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

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

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

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

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

मांग के हिसाब से यात्राओं का उदाहरण

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

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

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

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

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

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

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