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

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

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

1. टाइप के आधार पर मार्कर की स्टाइल तय करना: एक ही टाइप के मार्कर की स्टाइल तय करने के लिए, MarkerOptions ऑब्जेक्ट तय करें. आपके बताए गए बदलाव, हर मार्कर के बनने के बाद लागू होते हैं. इससे, डिफ़ॉल्ट विकल्प बदल जाते हैं. उदाहरण के लिए, इस गाइड में 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.
      });
    }
  };

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

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