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

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 ऑब्जेक्ट की मदद से वाहन मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. मार्कर को पसंद के मुताबिक बनाने के विकल्प में दिए गए किसी भी विकल्प का इस्तेमाल करके, किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, यह पैटर्न अपनाएं.

मांग के हिसाब से यात्रा की सुविधा का उदाहरण

JavaScriptTypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

JavaScriptTypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

मांग के हिसाब से यात्रा की सुविधा का उदाहरण

JavaScriptTypeScript

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

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

JavaScriptTypeScript

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

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

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

मांग के हिसाब से यात्रा की सुविधा का उदाहरण

JavaScriptTypeScript

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

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

JavaScriptTypeScript

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 का इस्तेमाल करके मार्कर की दिखने की सेटिंग को फ़िल्टर करने पर, परफ़ॉर्मेंस पर असर पड़ सकता है. सबसे सही तरीके के तौर पर, आपको यह फ़िल्टर करना चाहिए कि JavaScript लोकेशन प्रोवाइडर में उपलब्ध फ़िल्टर करने की सुविधाओं के साथ कौनसे मार्कर दिखें.

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

मांग के हिसाब से यात्रा की सुविधा का उदाहरण

JavaScriptTypeScript

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

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

JavaScriptTypeScript

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

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

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