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

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

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

ऐसा करने के दो तरीके हैं:

  • सबसे आसान तरीका: एक ही तरह के सभी मार्कर पर लागू करने के लिए, MarkerOptions ऑब्जेक्ट तय करें. इसके बाद, Consumer SDK दो स्थितियों में स्टाइल लागू करता है: मैप में मार्कर जोड़ने से पहले और मार्कर के लिए इस्तेमाल किए गए डेटा में बदलाव होने पर.
  • ज़्यादा ऐडवांस: पसंद के मुताबिक बनाने वाला फ़ंक्शन तय करें. कस्टमाइज़ेशन फ़ंक्शन की मदद से, डेटा के आधार पर मार्कर को स्टाइल किया जा सकता है. साथ ही, मार्कर को इंटरैक्टिव बनाया जा सकता है. जैसे, क्लिक हैंडलिंग. खास तौर पर, Consumer 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();

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