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

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

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

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