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

इस दस्तावेज़ में, मैप में वाहन और जगह के मार्कर को पसंद के मुताबिक बनाने का तरीका बताया गया है. इस मैप का इस्तेमाल, उपभोक्ताओं के लिए शिपमेंट ट्रैकिंग वाले वेब-आधारित ऐप्लिकेशन में किया जाता है.

JavaScript उपभोक्ता SDK टूल की मदद से, मैप में जोड़े गए दो तरह के मार्कर के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है:

ऐसा करने के लिए, इनमें से कोई एक तरीका अपनाएं:

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

आसान उदाहरण: MarkerOptions का इस्तेमाल करना

इस उदाहरण में, MarkerOptions ऑब्जेक्ट की मदद से वाहन मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. इस उदाहरण में, मार्कर की ओपैसिटी को 50% पर सेट किया गया है.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

बेहतर उदाहरण: कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करना

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

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

JavaScript

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

TypeScript

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

मार्कर के लिए अतिरिक्त जानकारी दिखाएं

किसी वाहन या जगह के मार्कर के बारे में ज़्यादा जानकारी दिखाने के लिए, InfoWindow का इस्तेमाल किया जा सकता है. इस उदाहरण में, एक InfoWindow बनाया गया है और उसे वाहन के मार्कर से अटैच किया गया है:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

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