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

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

अगर आपको 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);
    }
  };

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

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