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

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

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

पॉलीलाइन स्टाइल बनाएं

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

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

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

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

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

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

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

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

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

नीचे पसंद के मुताबिक बनाने के विकल्प दोनों में उपलब्ध हैं FleetEngineVehicleLocationProviderOptions और FleetEngineDeliveryVehicleLocationProviderOptions. आपके पास अपनी गाड़ी में पाथ की अलग-अलग स्थितियों के हिसाब से बदलाव करने का विकल्प होता है सफ़र:

• इस रास्ते पर पहले ही जा चुके हैं: takenPolylineCustomization इस्तेमाल करें - मांग पर यात्रा, शेड्यूल किए गए टास्क के बारे में जानकारी.

• ऐक्टिव तौर पर यात्रा का पाथ: activePolylineCustomization का इस्तेमाल करें - मांग पर यात्रा, शेड्यूल किए गए टास्क के बारे में जानकारी.

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

टाइप के हिसाब से रूट की पॉलीलाइन बनाएं

टाइप के हिसाब से रूट पॉलीलाइन को स्टाइल करने के लिए, Polyline ऑब्जेक्ट की स्टाइल बदलें 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();

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

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