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

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

• ऑब्जेक्ट को मैप में जोड़ने से पहले
• जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदल गया हो

पॉलीलाइन की स्टाइल तय करना

मार्कर को पसंद के मुताबिक बनाने की तरह ही, रास्ते के पॉलीलाइन को अलग-अलग तरीकों से स्टाइल किया जा सकता है:

1. टाइप के हिसाब से रूट पॉलीलाइन को स्टाइल करना: मैच होने वाले सभी Polyline ऑब्जेक्ट बनाने या अपडेट करने पर, उन पर लागू करने के लिए PolylineOptions का इस्तेमाल करें. उदाहरण के लिए, टाइप के हिसाब से पॉलीलाइन को स्टाइल करना देखें.

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

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

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

   उदाहरण के लिए, डेटा के आधार पर पॉलीलाइन को स्टाइल करना देखें.

3. रास्ते के पॉलीलाइन दिखने की सेटिंग कंट्रोल करना: visible प्रॉपर्टी का इस्तेमाल करके, पॉलीलाइन को छिपाया या दिखाया जा सकता है. ज़्यादा जानकारी के लिए, इस गाइड में पॉलीलाइन की विज़िबिलिटी कंट्रोल करना देखें.

4. वाहन या जगह के मार्कर के लिए ज़्यादा जानकारी दिखाएं: infowindow प्रॉपर्टी का इस्तेमाल करके, ज़्यादा जानकारी दिखाई जा सकती है. ज़्यादा जानकारी के लिए, इस गाइड में वाहन या जगह की जानकारी दिखाने वाले मार्कर की ज़्यादा जानकारी दिखाना देखें.

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

पसंद के मुताबिक बनाने के ये विकल्प, FleetEngineVehicleLocationProviderOptions और FleetEngineDeliveryVehicleLocationProviderOptions, दोनों में उपलब्ध हैं. वाहन की यात्रा के दौरान, पाथ की अलग-अलग स्थितियों के लिए पसंद के मुताबिक सेटिंग सेट की जा सकती हैं:

• पहले से यात्रा किया गया रास्ता: takenPolylineCustomization - ऑन-डिमांड यात्राएं, शेड्यूल किए गए टास्क रेफ़रंस का इस्तेमाल करें.

• ऐक्टिव तौर पर यात्रा के लिए पाथ: activePolylineCustomization - मांग पर उपलब्ध यात्राओं, शेड्यूल किए गए टास्क के रेफ़रंस का इस्तेमाल करें.

• अब तक तय नहीं किया गया पाथ: remainingPolylineCustomization - मांग पर उपलब्ध यात्राओं, शेड्यूल किए गए टास्क के रेफ़रंस का इस्तेमाल करें.

रास्ते के पॉलीलाइन को टाइप के हिसाब से स्टाइल करना

रास्ते के पॉलीलाइन को टाइप के हिसाब से स्टाइल करने के लिए, PolylineOptions का इस्तेमाल करके Polyline ऑब्जेक्ट की स्टाइल बदलें.

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

मांग पर यात्राओं या शेड्यूल किए गए टास्क का उदाहरण

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

डेटा का इस्तेमाल करके, रास्ते के पॉलीलाइन को स्टाइल करना

डेटा का इस्तेमाल करके, रास्ते के पॉलीलाइन को स्टाइल करने के लिए, कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके Polyline ऑब्जेक्ट की स्टाइल बदलें.

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

मांग पर यात्राओं के उदाहरण

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

ट्रैफ़िक अवेयर स्टाइलिंग का उदाहरण (सिर्फ़ मांग पर यात्राओं के लिए)

फ़्लीट इंजन, ट्रैफ़िक की स्पीड का डेटा दिखाता है. यह डेटा, ट्रैक किए जा रहे वाहन के लिए, ऐक्टिव और बाकी रास्तों का होता है. इस जानकारी का इस्तेमाल करके, Polyline ऑब्जेक्ट को उनकी ट्रैफ़िक स्पीड के हिसाब से स्टाइल किया जा सकता है:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

पॉलीलाइन की विज़िबिलिटी कंट्रोल करना

डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. किसी Polyline ऑब्जेक्ट को अदृश्य बनाने के लिए, उसकी visible प्रॉपर्टी को false पर सेट करें.

मांग पर यात्राओं या शेड्यूल किए गए टास्क का उदाहरण

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

वाहन या जगह के मार्कर की जानकारी देने वाली विंडो दिखाएं

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

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

मांग के हिसाब से यात्रा की सुविधा का उदाहरण

JavaScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

शेड्यूल किए गए टास्क का उदाहरण

JavaScript

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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();

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

• मैप की स्टाइल अपने हिसाब से तय करना
• मार्कर को पसंद के मुताबिक बनाना