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

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

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

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