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

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

कंज़्यूमर SDK टूल की मदद से, यह कंट्रोल किया जा सकता है कि रास्ते की पॉलीलाइन किसे दिखे. इसके अलावा, मैप पर यात्रा के रास्ते के लिए, रूट पॉलीलाइन को स्टाइल भी किया जा सकता है. 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};