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

प्लैटफ़ॉर्म चुनें: 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.
      });
    }
  };

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

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