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

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

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

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

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

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

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

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

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

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