रास्ते की पॉलीलाइन पसंद के मुताबिक बनाएं

इस दस्तावेज़ में बताया गया है कि उपभोक्ता उपयोगकर्ताओं और फ्लीट ऑपरेटर के लिए, वेब पर काम करने वाले जर्नी ट्रैकिंग ऐप्लिकेशन में इस्तेमाल किए जाने वाले मैप के लिए, रास्ते की पॉलीलाइन को कैसे पसंद के मुताबिक बनाया जा सकता है.

Consumer SDK की मदद से, मैप पर यात्रा के रास्ते के लिए रूट पॉलीलाइन की स्टाइल तय की जा सकती है या उसकी दिखने की सेटिंग कंट्रोल की जा सकती है. एसडीके, यात्रा के चालू या बचे हुए पाथ में मौजूद हर कोऑर्डिनेट की जोड़ी के लिए, एक google.maps.Polyline ऑब्जेक्ट बनाता है. इसके बाद, लाइब्रेरी इन बदलावों को दो स्थितियों में लागू करती है:

• मैप में ऑब्जेक्ट जोड़ने से पहले
• जब ऑब्जेक्ट के लिए इस्तेमाल किए गए डेटा में बदलाव हुआ हो

रास्ते की पॉलीलाइन को स्टाइल करना

जिस तरह आप मार्करों को स्टाइल करते हैं, उसी तरह आप कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करके रूट पॉलीलाइन को भी स्टाइल कर सकते हैं. इसके बाद, स्टाइलिंग को कॉन्फ़िगर करने के लिए, इनमें से किसी एक तरीके का इस्तेमाल करें:

• सबसे आसान तरीका: मैच किए गए सभी Polyline ऑब्जेक्ट पर लागू करने के लिए, PolylineOptions का इस्तेमाल करें. ऐसा तब करें, जब उन्हें बनाया या अपडेट किया जा रहा हो.
• ऐडवांस: कस्टमाइज़ेशन फ़ंक्शन के बारे में बताएं. कस्टम बनाने की सुविधाओं की मदद से, Fleet Engine से भेजे गए डेटा के आधार पर ऑब्जेक्ट की स्टाइल को अलग-अलग तरीके से सेट किया जा सकता है. यह फ़ंक्शन, यात्रा की मौजूदा स्थिति के आधार पर हर ऑब्जेक्ट की स्टाइल बदल सकता है. उदाहरण के लिए, जब वाहन धीरे चल रहा हो, तब Polyline ऑब्जेक्ट को गहरे रंग का कर देना या उसे मोटा कर देना. आपके पास Fleet Engine के बाहर के सोर्स से भी डेटा को जोड़ने और उस जानकारी के आधार पर Polyline ऑब्जेक्ट को स्टाइल करने का विकल्प होता है.

पसंद के मुताबिक बनाने के पैरामीटर

रास्ते की पॉलीलाइन को स्टाइल करते समय, FleetEngineShipmentLocationProviderOptions में दिए गए पैरामीटर का इस्तेमाल किया जाता है. ये पैरामीटर वाहन की यात्रा में विभिन्न पथ स्थितियों के लिए निम्नलिखित जानकारी प्रदान करते हैं:

• पहले ही यात्रा कर ली गई: takenPolylineCustomization का इस्तेमाल करें.
• सक्रिय रूप से यात्रा किया गया पथ: activePolylineCustomization का उपयोग करें.
• अभी तक यात्रा नहीं की गई पाथ: remainingPolylineCustomization का इस्तेमाल करें.

PolylineOptions का इस्तेमाल करें

यहां दिए गए उदाहरण में, PolylineOptions की मदद से Polyline ऑब्जेक्ट की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. इस पैटर्न का इस्तेमाल करके, पहले बताई गई किसी भी पॉलीलाइन को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, किसी भी Polyline ऑब्जेक्ट के स्टाइल को पसंद के मुताबिक बनाएं.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

रास्ते की पॉलीलाइन को स्टाइल करने के लिए, पसंद के मुताबिक बनाने के फ़ंक्शन का इस्तेमाल करना

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

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

रूट पॉलीलाइन दृश्यता नियंत्रित करें

डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. किसी Polyline ऑब्जेक्ट को छिपाने के लिए, उसकी visible प्रॉपर्टी को इस तरह सेट करें:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};