इस दस्तावेज़ में, वेब पर आधारित यात्रा ट्रैक करने वाले ऐप्लिकेशन में इस्तेमाल किए जाने वाले मैप के लिए, रूट पॉलीलाइन को पसंद के मुताबिक बनाने का तरीका बताया गया है.
Consumer SDK की मदद से, मैप पर यात्रा के रास्ते के लिए, रास्ते की पॉलीलाइन को दिखने से रोका जा सकता है या उसे स्टाइल किया जा सकता है. SDK टूल, यात्रा के चालू या बचे हुए पाथ में मौजूद निर्देशांकों के हर जोड़े के लिए, एक google.maps.Polyline ऑब्जेक्ट बनाता है. इसके बाद, लाइब्रेरी इन कस्टमाइज़ेशन को दो स्थितियों में लागू करती है:
- मैप में ऑब्जेक्ट जोड़ने से पहले
- जब ऑब्जेक्ट के लिए इस्तेमाल किए गए डेटा में बदलाव किया गया हो
रूट की पॉलीलाइन को स्टाइल करना
जिस तरह मार्कर को स्टाइल किया जा सकता है उसी तरह रूट की पॉलीलाइन को भी स्टाइल किया जा सकता है. इसके लिए, पसंद के मुताबिक बनाने के पैरामीटर का इस्तेमाल करें. इसके बाद, इनमें से किसी एक तरीके का इस्तेमाल करके स्टाइलिंग को कॉन्फ़िगर करें:
- सबसे आसान तरीका:
PolylineOptionsका इस्तेमाल करके, मैच होने वाले सभीPolylineऑब्जेक्ट पर लेबल लागू करें. ऐसा तब करें, जब उन्हें बनाया या अपडेट किया जाए. - ऐडवांस: पसंद के मुताबिक बनाने वाला फ़ंक्शन तय करें.
पसंद के मुताबिक बनाने की सुविधा से, 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};