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

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

मैप में जोड़े गए मार्कर के लुक और स्टाइल को पसंद के मुताबिक बनाएं. मैप में जोड़े गए मार्करों के रंग-रूप को दो तरीकों से कस्टमाइज़ करें:

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

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

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

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

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

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

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

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

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.
      });
    }
  };

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