রুট পলিলাইন কাস্টমাইজ করুন

একটি মানচিত্রে ট্র্যাক করা যানবাহনের জন্য রুটের চেহারা এবং অনুভূতি কীভাবে কাস্টমাইজ করা যায় তা এই দস্তাবেজটি কভার করে৷ পলিলাইনে একটি মানচিত্রে রুট আঁকা হয়। একটি গাড়ির সক্রিয় বা অবশিষ্ট পথের প্রতিটি জোড়া স্থানাঙ্কের জন্য লাইব্রেরি একটি google.maps.Polyline অবজেক্ট তৈরি করে৷ আপনি পলিলাইন কাস্টমাইজেশন নির্দিষ্ট করে Polyline অবজেক্ট স্টাইল করতে পারেন যা লাইব্রেরি দুটি পরিস্থিতিতে প্রযোজ্য হয়:

  • ম্যাপে বস্তু যোগ করার আগে
  • যখন বস্তুর জন্য ব্যবহৃত ডেটা পরিবর্তিত হয়

স্টাইল পলিলাইন

আপনি কীভাবে মার্কারগুলি কাস্টমাইজ করতে পারেন তার অনুরূপ, আপনি বিভিন্ন উপায়ে রুট পলিলাইন স্টাইল করতে পারেন:

  1. টাইপ অনুসারে স্টাইল রুট পলিলাইন : যখন তারা তৈরি বা আপডেট করা হয় তখন মিলিত Polyline অবজেক্টগুলির জন্য প্রয়োগ করতে PolylineOptions ব্যবহার করুন। উদাহরণের জন্য, টাইপ অনুসারে স্টাইল পলিলাইন দেখুন।

  2. ডেটার উপর ভিত্তি করে স্টাইল রুট পলিলাইন : ফ্লিট ট্র্যাকিং বা বাইরের উত্স থেকে ডেটার উপর ভিত্তি করে একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করুন:

    • ফ্লিট ট্র্যাকিং থেকে ডেটা : ফ্লিট ট্র্যাকিং পলিলাইন ডেটাকে কাস্টমাইজেশন ফাংশনে পাস করে, যার মধ্যে বর্তমান গাড়ির অবস্থার ডেটা রয়েছে। আপনি এই ডেটার উপর ভিত্তি করে পলিলাইন স্টাইল করতে পারেন, যার মধ্যে Polyline অবজেক্টকে গভীর ছায়ায় রঙ করা বা গাড়িটি ধীর গতিতে চলার সময় এটিকে আরও ঘন করা।

    • বাইরের উত্স : আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকে পাওয়া ডেটার সাথে ফ্লিট ট্র্যাকিং ডেটা একত্রিত করতে পারেন এবং সেই তথ্যের ভিত্তিতে Polyline অবজেক্টকে স্টাইল করতে পারেন।

    উদাহরণের জন্য, ডেটার উপর ভিত্তি করে স্টাইল পলিলাইন দেখুন।

  3. রুট পলিলাইনগুলির দৃশ্যমানতা নিয়ন্ত্রণ করুন : আপনি visible সম্পত্তি ব্যবহার করে পলিলাইনগুলি লুকাতে বা দেখাতে পারেন। বিস্তারিত জানার জন্য, এই নির্দেশিকায় পলিলাইনের দৃশ্যমানতা নিয়ন্ত্রণ দেখুন।

  4. একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য অতিরিক্ত তথ্য প্রদর্শন করুন : আপনি infowindow বৈশিষ্ট্য ব্যবহার করে অতিরিক্ত তথ্য প্রদর্শন করতে পারেন। বিশদ বিবরণের জন্য, এই নির্দেশিকায় যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য অতিরিক্ত তথ্য প্রদর্শন দেখুন।

পলিলাইন কাস্টমাইজেশন বিকল্প

নিম্নলিখিত কাস্টমাইজেশন বিকল্পগুলি FleetEngineVehicleLocationProviderOptions এবং FleetEngineDeliveryVehicleLocationProviderOptions উভয় ক্ষেত্রেই উপলব্ধ। আপনি গাড়ির যাত্রায় বিভিন্ন পাথ স্টেটের জন্য কাস্টমাইজেশন সেট করতে পারেন:

টাইপ দ্বারা শৈলী রুট পলিলাইন

টাইপ দ্বারা রুট পলিলাইন স্টাইল করতে, PolylineOptions ব্যবহার করে Polyline অবজেক্টের স্টাইল পরিবর্তন করুন।

নিম্নোক্ত উদাহরণ দেখায় কিভাবে PolylineOptions সাথে Polyline অবজেক্টের জন্য স্টাইলিং কনফিগার করতে হয়। এই গাইডে পলিলাইন কাস্টমাইজেশন বিকল্পগুলিতে তালিকাভুক্ত যে কোনও রুট পলিলাইন কাস্টমাইজেশন ব্যবহার করে যে কোনও Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।

অন-ডিমান্ড ট্রিপ বা নির্ধারিত কাজের জন্য উদাহরণ

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

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

ডাটা ব্যবহার করে স্টাইল রুট পলিলাইন

ডেটা ব্যবহার করে রুট পলিলাইন স্টাইল করতে, কাস্টমাইজেশন ফাংশন ব্যবহার করে Polyline অবজেক্টের স্টাইল পরিবর্তন করুন।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি কাস্টমাইজেশন ফাংশন ব্যবহার করে একটি সক্রিয় রুটের জন্য স্টাইলিং কনফিগার করতে হয়। এই গাইডের পলিলাইন কাস্টমাইজেশন বিকল্পগুলিতে তালিকাভুক্ত যে কোনও পলিলাইন কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনও Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।

অন-ডিমান্ড ট্রিপের উদাহরণ

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

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

নির্ধারিত কাজের উদাহরণ

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

// 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 অবজেক্টকে তাদের ট্র্যাফিক গতি অনুসারে স্টাইল করতে এই তথ্যটি ব্যবহার করতে পারেন:

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

// 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 সেট করুন।

অন-ডিমান্ড ট্রিপ বা নির্ধারিত কাজের জন্য উদাহরণ

জাভাস্ক্রিপ্ট 

remainingPolylineCustomization = {visible: false};

টাইপস্ক্রিপ্ট 

remainingPolylineCustomization = {visible: false};

একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য একটি তথ্য উইন্ডো প্রদর্শন করুন

আপনি একটি যানবাহন বা অবস্থান চিহ্নিতকারী সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে একটি InfoWindow ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি InfoWindow তৈরি করতে হয় এবং এটিকে একটি গাড়ির মার্কারে সংযুক্ত করতে হয়।

অন-ডিমান্ড ট্রিপের উদাহরণ

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

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

নির্ধারিত কাজের উদাহরণ

জাভাস্ক্রিপ্ট 

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

টাইপস্ক্রিপ্ট 

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

এরপর কি