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