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