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

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

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

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

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

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

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

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

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

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