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

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

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

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