मार्कर कस्टमाइज़ करें

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

मैप में जोड़े गए मार्कर के रंग-रूप में बदलाव करना. मैप में जोड़े गए मार्कर के रंग-रूप में दो तरीकों से बदलाव किया जा सकता है:

1. टाइप के हिसाब से मार्कर की स्टाइल तय करना: एक ही टाइप के मार्कर की स्टाइल तय करने के लिए, एक MarkerOptions ऑब्जेक्ट तय करें. आपके तय किए गए बदलाव, हर मार्कर के बनने के बाद लागू होते हैं. इससे डिफ़ॉल्ट विकल्पों पर आपके तय किए गए विकल्प लागू हो जाते हैं. उदाहरण के लिए, इस गाइड में Change the styling of markers using MarkerOptions का इस्तेमाल करके, मार्कर की स्टाइल में बदलाव करना देखें.

2. डेटा के हिसाब से मार्कर की स्टाइल तय करना: डेटा के हिसाब से मार्कर की स्टाइल तय करने के लिए, कस्टमाइज़ेशन फ़ंक्शन तय करें. यात्रा की जानकारी शेयर करने की सुविधा से मिले डेटा या बाहरी सोर्स से मिले डेटा के हिसाब से स्टाइल तय की जा सकती है:

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

   • बाहरी सोर्स: यात्रा की जानकारी शेयर करने की सुविधा से मिले डेटा को, Fleet Engine के बाहर के सोर्स से मिले डेटा के साथ जोड़ा जा सकता है. साथ ही, उस जानकारी के आधार पर मार्कर की स्टाइल तय की जा सकती है.

   उदाहरण के लिए, इस गाइड में कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके, मार्कर की स्टाइल में बदलाव करना देखें.

3. मार्कर में क्लिक हैंडलिंग जोड़ना: उदाहरण के लिए, क्लिक हैंडलिंग जोड़ना देखें.

मार्कर को पसंद के मुताबिक बनाने के विकल्प

Google Maps JavaScript API में, FleetEngineTripLocationProviderOptions के तहत, दोनों विकल्पों में ये कस्टमाइज़ेशन पैरामीटर इस्तेमाल किए जाते हैं:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

MarkerOptions का इस्तेमाल करके, मार्कर की स्टाइल में बदलाव करना

यहां दिए गए उदाहरण में, MarkerOptions ऑब्जेक्ट का इस्तेमाल करके, वाहन के मार्कर की स्टाइल तय करने का तरीका बताया गया है. मार्कर को पसंद के मुताबिक बनाने के विकल्पों में दिए गए मार्कर को पसंद के मुताबिक बनाने के किसी भी विकल्प का इस्तेमाल करके, किसी भी मार्कर की स्टाइल तय करने के लिए, यह तरीका अपनाएं. मार्कर को पसंद के मुताबिक बनाने के विकल्प.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके, मार्कर की स्टाइल में बदलाव करना

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

मार्कर में क्लिक हैंडलिंग जोड़ना

यहां दिए गए उदाहरण में, वाहन के मार्कर में क्लिक हैंडलिंग जोड़ने का तरीका बताया गया है. मार्कर को पसंद के मुताबिक बनाने के विकल्पों में दिए गए मार्कर को पसंद के मुताबिक बनाने के किसी भी पैरामीटर का इस्तेमाल करके, किसी भी मार्कर में क्लिक हैंडलिंग जोड़ने के लिए, यह तरीका अपनाएं.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

आगे क्या करना है

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