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

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

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

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

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

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

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

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

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

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

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

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

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