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

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

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

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