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

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

कंज़्यूमर SDK टूल की मदद से, रूट पॉलीलाइन के दिखने की सेटिंग को कंट्रोल किया जा सकता है. इसके अलावा, मैप पर यात्रा के रास्ते के लिए पॉलीलाइन रूट डालें. SDK टूल, यात्रा के हर निर्देशांक के लिए google.maps.Polyline ऑब्जेक्ट ऐक्टिव या बाकी पाथ. इसके बाद, लाइब्रेरी इन कस्टमाइज़ेशन को दो स्थितियां:

  • मैप में ऑब्जेक्ट जोड़ने से पहले
  • जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदला हो

रूट की पॉलीलाइन स्टाइल बनाएं

जिस तरह मार्कर को स्टाइल किया जाता है उसी तरह रूट की पॉलीलाइन को भी स्टाइल किया जाता है कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करें. इसके बाद, आप इनमें से किसी एक का इस्तेमाल करके स्टाइलिंग कॉन्फ़िगर करते हैं ये तरीके अपनाएं:

  • सबसे आसान: PolylineOptions का इस्तेमाल करके, सभी बनाए या अपडेट किए जाने पर Polyline ऑब्जेक्ट से मेल खाते हैं.
  • ऐडवांस सेटिंग: कस्टमाइज़ेशन फ़ंक्शन तय करें. कस्टमाइज़ेशन फ़ंक्शन से ऑब्जेक्ट की अलग-अलग स्टाइलिंग की जा सकती हैं. ऐसा डेटा जो Fleet Engine ने भेजा है. फ़ंक्शन हर एक की स्टाइल बदल सकता है यात्रा की मौजूदा स्थिति के आधार पर ऑब्जेक्ट; उदाहरण के लिए, Polyline ऑब्जेक्ट की छांव ज़्यादा है या वाहन की चौड़ाई ज़्यादा है धीरे चल रहा है. Fleet Engine के बाहर के सोर्स से भी मीटिंग में शामिल हुआ जा सकता है और उस जानकारी के आधार पर Polyline ऑब्जेक्ट को स्टाइल दें.

कस्टमाइज़ेशन पैरामीटर

रूट पॉलीलाइन को स्टाइल करने के लिए, इसमें दिए गए पैरामीटर का इस्तेमाल करें FleetEngineShipmentLocationProviderOptions. ये पैरामीटर उपलब्ध कराते हैं वाहन के सफ़र के दौरान, रास्ते की अलग-अलग स्थितियां इस तरह हैं:

  • पहले ही यात्रा कर चुके हैं पाथ: 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.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};