इस दस्तावेज़ में, उपभोक्ताओं के लिए वेब पर आधारित यात्रा को ट्रैक करने वाले ऐप्लिकेशन में इस्तेमाल किए जाने वाले मैप के लिए, रास्ते की पॉलीलाइन को पसंद के मुताबिक बनाने का तरीका बताया गया है.
Consumer SDK की मदद से, मैप पर यात्रा के रास्ते के लिए, रूट पॉलीलाइन की स्टाइल बदली जा सकती है या उसकी दिखने की सेटिंग को कंट्रोल किया जा सकता है. एसडीके, यात्रा के चालू या बचे हुए पाथ में मौजूद हर कोऑर्डिनेट की जोड़ी के लिए, एक google.maps.Polyline ऑब्जेक्ट बनाता है. इसके बाद, लाइब्रेरी इन बदलावों को दो स्थितियों में लागू करती है:
- मैप में ऑब्जेक्ट जोड़ने से पहले
- जब ऑब्जेक्ट के लिए इस्तेमाल किए गए डेटा में बदलाव हुआ हो
रास्ते की पॉलीलाइन को स्टाइल करना
मार्कर को स्टाइल करने के तरीके की तरह ही, कस्टम बनाने वाले पैरामीटर का इस्तेमाल करके, रास्ते की पॉलीलाइन को स्टाइल किया जाता है. इसके बाद, स्टाइलिंग को कॉन्फ़िगर करने के लिए, इनमें से कोई एक तरीका अपनाएं:
- सबसे आसान तरीका: मैच किए गए
Polylineऑब्जेक्ट बनाए या अपडेट किए जाने पर, उन सभी पर लागू करने के लिएPolylineOptionsका इस्तेमाल करें. - ऐडवांस: कस्टमाइज़ेशन फ़ंक्शन तय करें.
कस्टम बनाने की सुविधाओं की मदद से, Fleet Engine से भेजे गए डेटा के आधार पर ऑब्जेक्ट की स्टाइल को अलग-अलग तरीके से सेट किया जा सकता है. यह फ़ंक्शन, यात्रा की मौजूदा स्थिति के आधार पर हर ऑब्जेक्ट की स्टाइल बदल सकता है. उदाहरण के लिए, जब वाहन धीरे चल रहा हो, तब
Polylineऑब्जेक्ट को गहरे रंग का करना या उसे मोटा करना. इतना ही नहीं, Fleet Engine के बाहर मौजूद सोर्स से भी डेटा को जोड़ा जा सकता है. साथ ही, उस जानकारी के आधार परPolylineऑब्जेक्ट को स्टाइल किया जा सकता है.
पसंद के मुताबिक बनाने के पैरामीटर
रास्ते की पॉलीलाइन को स्टाइल करते समय, FleetEngineTripLocationProviderOptions में दिए गए पैरामीटर का इस्तेमाल किया जाता है. ये पैरामीटर, वाहन की यात्रा के दौरान अलग-अलग पाथ की स्थितियां बताते हैं. जैसे:
- पहले ही यात्रा कर ली गई: इसके लिए,
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.trip.remainingWaypoints[0].distanceMeters;
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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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};