জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি দিয়ে আপনার ফ্লিট ট্র্যাক করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি আপনাকে তাদের বহরে থাকা যানবাহনের অবস্থানগুলিকে বাস্তব সময়ে কল্পনা করতে দেয়৷ লাইব্রেরি ডেলিভারি এপিআই ব্যবহার করে ডেলিভারি যানবাহনের পাশাপাশি কাজের ভিজ্যুয়ালাইজেশনের অনুমতি দেয়। জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরির মতো, এটিতে একটি জাভাস্ক্রিপ্ট মানচিত্র উপাদান রয়েছে যা ফ্লিট ইঞ্জিনের সাথে সংযোগ করার জন্য একটি আদর্শ google.maps.Map সত্তা এবং ডেটা উপাদানগুলির জন্য একটি ড্রপ-ইন প্রতিস্থাপন।

উপাদান

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ডেলিভারি যানবাহন এবং স্টপগুলির ভিজ্যুয়ালাইজেশনের জন্য উপাদান প্রদান করে, সেইসাথে ইটিএ বা ডেলিভারির অবশিষ্ট দূরত্বের জন্য কাঁচা ডেটা ফিড প্রদান করে।

ফ্লিট ট্র্যাকিং মানচিত্র দৃশ্য

ফ্লিট ট্র্যাকিং ম্যাপ ভিউ উপাদান যানবাহন এবং কাজের অবস্থান কল্পনা করে। যদি একটি যানবাহনের রুট জানা থাকে, তাহলে মানচিত্র দৃশ্য উপাদানটি সেই গাড়িটিকে অ্যানিমেট করে যখন এটি তার পূর্বাভাসিত পথ ধরে চলে।

অবস্থান প্রদানকারী

অবস্থান প্রদানকারীরা ফ্লিট ইঞ্জিনে সঞ্চিত তথ্য নিয়ে কাজ করে ট্র্যাক করা বস্তুর জন্য অবস্থানের তথ্য যাত্রা শেয়ারিং ম্যাপে পাঠাতে।

ডেলিভারি গাড়ির অবস্থান প্রদানকারী

ডেলিভারি গাড়ির অবস্থান প্রদানকারী একটি একক ডেলিভারি গাড়ির অবস্থানের তথ্য প্রদর্শন করে। এতে গাড়ির অবস্থানের পাশাপাশি ডেলিভারি গাড়ির দ্বারা সম্পন্ন করা কাজগুলির তথ্য রয়েছে।

ডেলিভারি বহর অবস্থান প্রদানকারী

ডেলিভারি ফ্লিট অবস্থান প্রদানকারী একাধিক যানবাহনের অবস্থানের তথ্য প্রদর্শন করে। আপনি নির্দিষ্ট যানবাহন বা অবস্থানের জন্য ফিল্টার করতে পারেন, অথবা আপনি পুরো বহরটি দেখাতে পারেন।

ট্র্যাক করা অবস্থানের দৃশ্যমানতা নিয়ন্ত্রণ করুন

এই বিভাগটি ফ্লিট ইঞ্জিন পূর্বনির্ধারিত অবস্থান প্রদানকারীর জন্য মানচিত্রে ট্র্যাক করা অবস্থান বস্তুর দৃশ্যমানতার নিয়ম বর্ণনা করে। কাস্টম বা প্রাপ্ত অবস্থান প্রদানকারীরা দৃশ্যমানতার নিয়ম পরিবর্তন করতে পারে।

ডেলিভারি যানবাহন

একটি ডেলিভারি বাহন ফ্লিট ইঞ্জিনে তৈরি হওয়ার সাথে সাথে দৃশ্যমান হয়, এবং তার কাজ নির্বিশেষে তার রুট জুড়ে দৃশ্যমান হয়।

টাস্ক অবস্থান চিহ্নিতকারী

পরিকল্পিত গাড়ির স্টপ ম্যাপে গাড়ির স্টপ মার্কার হিসাবে দেখানো হয়েছে। সম্পূর্ণ কাজগুলির জন্য মার্কারগুলি একটি গাড়ির পরিকল্পিত স্টপের চেয়ে ভিন্ন স্টাইলে প্রদর্শিত হয়৷

টাস্ক ফলাফলের অবস্থান টাস্ক ফলাফল চিহ্নিতকারীর সাথে প্রদর্শিত হয়। একটি সফল ফলাফল সহ কার্যগুলি সফল টাস্ক মার্কারগুলির সাথে প্রদর্শিত হয়, অন্য সমস্ত কাজগুলি অসফল টাস্ক মার্কারগুলির সাথে প্রদর্শিত হয়৷

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি দিয়ে শুরু করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করার আগে নিশ্চিত হয়ে নিন যে আপনি ফ্লিট ইঞ্জিন এবং একটি API কী পাওয়ার সাথে পরিচিত। তারপর একটি টাস্ক আইডি এবং ডেলিভারি গাড়ি আইডি দাবি তৈরি করুন।

একটি টাস্ক আইডি এবং ডেলিভারি গাড়ি আইডি দাবি তৈরি করুন

ডেলিভারি গাড়ির অবস্থান প্রদানকারী ব্যবহার করে ডেলিভারি যান ট্র্যাক করতে, একটি টাস্ক আইডি এবং ডেলিভারি গাড়ি আইডি দাবি সহ একটি JSON ওয়েব টোকেন (JWT) তৈরি করুন৷

JWT পেলোড তৈরি করতে, টাস্কিড এবং ডেলিভারি ভেহিক্লিড কী সহ অনুমোদন বিভাগে একটি অতিরিক্ত দাবি যোগ করুন এবং প্রতিটি কী-এর মান * তে সেট করুন। টোকেনটি ফ্লিট ইঞ্জিন পরিষেবা সুপার ইউজার ক্লাউড আইএএম ভূমিকা ব্যবহার করে তৈরি করা উচিত। মনে রাখবেন যে এটি ফ্লিট ইঞ্জিন সত্তা তৈরি, পড়তে এবং সংশোধন করার জন্য বিস্তৃত অ্যাক্সেস দেয় এবং শুধুমাত্র বিশ্বস্ত ব্যবহারকারীদের সাথে ভাগ করা উচিত।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে যানবাহন এবং কাজ দ্বারা ট্র্যাক করার জন্য একটি টোকেন তৈরি করতে হয়:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন৷

আপনি আপনার প্রকল্পের জন্য একটি পরিষেবা অ্যাকাউন্ট শংসাপত্র ব্যবহার করে আপনার সার্ভারগুলিতে উপযুক্ত দাবি সহ একটি টোকেন পুনরুদ্ধার করতে একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে পারেন৷ আপনার সার্ভারে শুধুমাত্র টোকেন মিন্ট করা গুরুত্বপূর্ণ এবং কোনো ক্লায়েন্টের সাথে আপনার সার্টিফিকেট শেয়ার করবেন না। অন্যথায়, আপনি আপনার সিস্টেমের নিরাপত্তার সাথে আপস করবেন।

একটি প্রতিশ্রুতিতে মোড়ানো দুটি ক্ষেত্র সহ একটি ডেটা স্ট্রাকচার আনতে হবে:

• একটি স্ট্রিং token ।
• একটি সংখ্যার expiresInSeconds । একটি টোকেন আনার পর এই পরিমাণ সময়ের মধ্যে মেয়াদ শেষ হয়ে যায়।

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি প্রমাণীকরণ টোকেন ফেচারের মাধ্যমে একটি টোকেন অনুরোধ করে যখন নিম্নলিখিতগুলির মধ্যে কোনটি সত্য হয়:

• এটির একটি বৈধ টোকেন নেই, যেমন যখন এটি একটি নতুন পৃষ্ঠা লোডের জন্য ফেচারকে কল করেনি বা যখন ফেচারটি একটি টোকেন নিয়ে ফিরে আসেনি৷
• আগে যে টোকেনটি আনা হয়েছিল তার মেয়াদ শেষ হয়ে গেছে।
• এটি আগে যে টোকেনটি আনা হয়েছিল সেটি মেয়াদ শেষ হওয়ার এক মিনিটের মধ্যে।

অন্যথায়, লাইব্রেরি পূর্বে জারি করা, এখনও বৈধ টোকেন ব্যবহার করে এবং ফেচারকে কল করে না।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে হয়:

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

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

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

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

টোকেন মিন্ট করার জন্য সার্ভার-সাইড এন্ডপয়েন্ট বাস্তবায়ন করার সময়, নিম্নলিখিতগুলি মনে রাখবেন:

• শেষ বিন্দু অবশ্যই টোকেনের জন্য একটি মেয়াদ শেষ হওয়ার সময় ফেরত দেবে; উপরের উদাহরণে, এটি data.ExpiresInSeconds হিসাবে দেওয়া হয়েছে। ExpiresInSeconds।
• প্রমাণীকরণ টোকেন ফেচারকে অবশ্যই মেয়াদ শেষ হওয়ার সময় (সেকেন্ডে, আনার সময় থেকে) লাইব্রেরিতে পাস করতে হবে, যেমন উদাহরণে দেখানো হয়েছে।
• SERVER_TOKEN_URL আপনার ব্যাকএন্ড বাস্তবায়নের উপর নির্ভর করে, এইগুলি নমুনা অ্যাপ ব্যাকএন্ডের URLগুলি:
  • https:// SERVER_URL /token/delivery_driver/ DELIVERY_VEHICLE_ID
  • https:// SERVER_URL /token/delivery_consumer/ TRACKING_ID
  • https:// SERVER_URL /token/fleet_reader

HTML থেকে একটি মানচিত্র লোড করুন

নিম্নলিখিত উদাহরণটি একটি নির্দিষ্ট URL থেকে জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি কীভাবে লোড করতে হয় তা দেখায়। কলব্যাক প্যারামিটারটি API লোড হওয়ার পরে initMap ফাংশনটি চালায়। ডিফার অ্যাট্রিবিউট ব্রাউজারটিকে API লোড হওয়ার সময় আপনার পৃষ্ঠার বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

একটি ডেলিভারি গাড়ি অনুসরণ করুন

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

একটি ডেলিভারি গাড়ির অবস্থান প্রদানকারীকে ইনস্ট্যান্ট করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ফ্লিট ইঞ্জিন ডেলিভারি API-এর জন্য একটি অবস্থান প্রদানকারীকে পূর্বনির্ধারিত করে। আপনার প্রোজেক্ট আইডি এবং আপনার টোকেন ফ্যাক্টরির একটি রেফারেন্স ব্যবহার করে এটিকে ইনস্ট্যান্টিয়েট করুন।

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

ম্যাপ ভিউ আরম্ভ করুন

জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পরে, ম্যাপ ভিউ শুরু করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় একটি <div> উপাদান থাকা উচিত যা মানচিত্র দৃশ্য ধারণ করে। নিচের উদাহরণে <div> উপাদানটির নাম দেওয়া হয়েছে map_canvas ।

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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

ঘটনা পরিবর্তন শুনুন

আপনি অবস্থান প্রদানকারী ব্যবহার করে deliveryVehicle অবজেক্ট থেকে একটি টাস্ক সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্যে গাড়ির পরবর্তী পিকআপ বা ড্রপঅফের আগে ETA এবং অবশিষ্ট দূরত্ব অন্তর্ভুক্ত থাকে। মেটা তথ্য পরিবর্তন একটি আপডেট ইভেন্ট ট্রিগার. নিম্নলিখিত উদাহরণ দেখায় কিভাবে এই পরিবর্তন ঘটনা শুনতে.

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

locationProvider.addListener('update', e => {
  // e.deliveryVehicle contains data that may be        
  // useful to the rest of the UI.  
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

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

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  // e.deliveryVehicle contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicle) {
    console.log(e.deliveryVehicle.remainingDuration);
  }
});

ত্রুটির জন্য শুনুন

ডেলিভারি গাড়ির তথ্যের অনুরোধ থেকে অ্যাসিঙ্ক্রোনাসভাবে উদ্ভূত ত্রুটিগুলি ত্রুটি ইভেন্টগুলিকে ট্রিগার করে। নিম্নলিখিত উদাহরণ দেখায় যে ত্রুটিগুলি পরিচালনা করার জন্য এই ইভেন্টগুলির জন্য কীভাবে শুনতে হয়।

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

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

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

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

ট্র্যাকিং বন্ধ করুন

অবস্থান প্রদানকারীকে ডেলিভারি গাড়ি ট্র্যাক করা থেকে বিরত করতে, অবস্থান প্রদানকারীর থেকে ডেলিভারি গাড়ির আইডি সরিয়ে দিন।

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

locationProvider.deliveryVehicleId = '';

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

locationProvider.deliveryVehicleId = '';

মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।

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

mapView.removeLocationProvider(locationProvider);

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

mapView.removeLocationProvider(locationProvider);

একটি ডেলিভারি বহর দেখুন

এই বিভাগটি দেখায় কিভাবে একটি ডেলিভারি ফ্লিট দেখতে জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি ব্যবহার করতে হয়। আপনার কোড চালানোর আগে স্ক্রিপ্ট ট্যাগে নির্দিষ্ট কলব্যাক ফাংশন থেকে লাইব্রেরি লোড করা নিশ্চিত করুন।

একটি ডেলিভারি ফ্লিট অবস্থান প্রদানকারীকে ইনস্ট্যান্ট করুন

JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরি একটি অবস্থান প্রদানকারীকে পূর্বনির্ধারিত করে যা FleetEngine Deliveries API থেকে একাধিক যানবাহন নিয়ে আসে। আপনার প্রজেক্ট আইডি ব্যবহার করুন এবং সেইসাথে আপনার টোকেন ফেচারের রেফারেন্স এটিকে ইনস্ট্যান্টিয়েট করতে ব্যবহার করুন।

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter ম্যাপে প্রদর্শিত যানবাহন ফিল্টার করতে ব্যবহৃত একটি প্রশ্ন নির্দিষ্ট করে। এই ফিল্টারটি সরাসরি ফ্লিট ইঞ্জিনে পাঠানো হয়। সমর্থিত ফরম্যাটের জন্য ListDeliveryVehiclesRequest.filter দেখুন।

locationRestriction ম্যাপে যানবাহন প্রদর্শন করার এলাকাকে সীমাবদ্ধ করে। এটি অবস্থান ট্র্যাকিং সক্রিয় কিনা তা নিয়ন্ত্রণ করে। এটি সেট না হওয়া পর্যন্ত অবস্থান ট্র্যাকিং শুরু হবে না।

অবস্থান প্রদানকারী তৈরি হয়ে গেলে, মানচিত্র দৃশ্য শুরু করুন ।

মানচিত্র ভিউপোর্ট ব্যবহার করে অবস্থান সীমাবদ্ধতা সেট করুন

locationRestriction সীমাবদ্ধতা মানচিত্র দৃশ্যে বর্তমানে দৃশ্যমান এলাকার সাথে মেলে কনফিগার করা যেতে পারে।

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

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

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

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

ঘটনা পরিবর্তন শুনুন

আপনি অবস্থান প্রদানকারী ব্যবহার করে deliveryVehicles অবজেক্ট থেকে বহর সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্য যেমন ন্যাভিগেশন অবস্থা, অবশিষ্ট দূরত্ব এবং কাস্টম বৈশিষ্ট্য হিসাবে যানবাহন বৈশিষ্ট্য অন্তর্ভুক্ত; আরো বিস্তারিত জানার জন্য রেফারেন্স ডকুমেন্টেশন দেখুন. মেটা তথ্য পরিবর্তন একটি আপডেট ইভেন্ট ট্রিগার. নিম্নলিখিত উদাহরণ দেখায় কিভাবে এই পরিবর্তন ঘটনা শুনতে.

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

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

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

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

ত্রুটির জন্য শুনুন

ডেলিভারি ফ্লিট তথ্যের অনুরোধ থেকে অ্যাসিঙ্ক্রোনাসভাবে উদ্ভূত ত্রুটিগুলি ত্রুটি ইভেন্টগুলিকে ট্রিগার করে। এই ইভেন্টগুলির জন্য কীভাবে শুনতে হয় তা দেখানোর উদাহরণগুলির জন্য, ত্রুটির জন্য শুনুন দেখুন।

ট্র্যাকিং বন্ধ করুন

ডেলিভারি ফ্লিট ট্র্যাক করা থেকে অবস্থান প্রদানকারীকে থামাতে, অবস্থান প্রদানকারীর সীমা নাল সেট করুন।

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

locationProvider.locationRestriction = null;

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

locationProvider.locationRestriction = null;

মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।

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

mapView.removeLocationProvider(locationProvider);

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

mapView.removeLocationProvider(locationProvider);

একটি ডেলিভারি ফ্লিট দেখার সময় একটি ডেলিভারি গাড়ি ট্র্যাক করুন

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

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

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

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

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

ডেলিভারি ফ্লিট অবস্থান প্রদানকারী ম্যাপে ডেলিভারি যানবাহন দেখাতে শুরু করে। ডেলিভারি গাড়ির অবস্থান প্রদানকারীকে একটি ডেলিভারি গাড়ি ট্র্যাক করতে সক্ষম করতে মার্কার কাস্টমাইজেশন ব্যবহার করুন যখন তার ফ্লিট মার্কার ক্লিক করা হয়:

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

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

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

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

একই গাড়ির জন্য দুটি মার্কার রেন্ডারিং প্রতিরোধ করতে ডেলিভারি গাড়ির অবস্থান প্রদানকারীর থেকে মার্কারটি লুকান:

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

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

বেস মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করুন

মানচিত্রের উপাদানটির চেহারা এবং অনুভূতি কাস্টমাইজ করতে, ক্লাউড-ভিত্তিক টুলিং ব্যবহার করে বা সরাসরি কোডে বিকল্পগুলি সেট করে আপনার মানচিত্রকে স্টাইল করুন ।

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং আপনাকে আপনার কোডে কোনো পরিবর্তন না করেই Google ক্লাউড কনসোল থেকে Google মানচিত্র ব্যবহার করে এমন যেকোনো অ্যাপের জন্য মানচিত্রের শৈলী তৈরি এবং সম্পাদনা করতে দেয়। মানচিত্রের শৈলীগুলি আপনার ক্লাউড প্রকল্পে মানচিত্র আইডি হিসাবে সংরক্ষিত হয়৷ আপনার JavaScript ফ্লিট ট্র্যাকিং মানচিত্রে একটি শৈলী প্রয়োগ করতে, আপনি যখন JourneySharingMapView তৈরি করবেন তখন একটি mapId নির্দিষ্ট করুন। JourneySharingMapView তাৎক্ষণিক হওয়ার পরে mapId ক্ষেত্র পরিবর্তন বা যোগ করা যাবে না। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি মানচিত্র আইডি দিয়ে পূর্বে তৈরি করা মানচিত্র শৈলী সক্ষম করা যায়।

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

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

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

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

কোড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন

ম্যাপ স্টাইলিং কাস্টমাইজ করার আরেকটি উপায় হল আপনি যখন JourneySharingMapView তৈরি করেন তখন mapOptions সেট করা।

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

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

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

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

মার্কার কাস্টমাইজেশন ব্যবহার করুন

জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরির সাহায্যে, আপনি মানচিত্রে যোগ করা মার্কারগুলির চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন৷ আপনি মার্কার কাস্টমাইজেশন নির্দিষ্ট করে এটি করেন, যা ফ্লিট ট্র্যাকিং লাইব্রেরি ম্যাপে মার্কার যোগ করার আগে এবং প্রতিটি মার্কার আপডেটের সাথে প্রয়োগ করে।

সবচেয়ে সহজ কাস্টমাইজেশন হল একটি MarkerOptions অবজেক্ট নির্দিষ্ট করা যা একই ধরনের সমস্ত মার্কারে প্রয়োগ করা হবে। বস্তুর মধ্যে নির্দিষ্ট পরিবর্তনগুলি প্রতিটি মার্কার তৈরি হওয়ার পরে প্রয়োগ করা হয়, যেকোনো ডিফল্ট বিকল্প ওভাররাইট করে।

একটি আরও উন্নত বিকল্প হল একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করা। কাস্টমাইজেশন ফাংশনগুলি ডেটার উপর ভিত্তি করে মার্কারগুলির স্টাইলিং করার পাশাপাশি মার্কারগুলিতে ইন্টারঅ্যাক্টিভিটি যোগ করার অনুমতি দেয়, যেমন ক্লিক হ্যান্ডলিং। বিশেষত, ফ্লিট ট্র্যাকিং মার্কার যে ধরনের বস্তুর প্রতিনিধিত্ব করে সে সম্পর্কে কাস্টমাইজেশন ফাংশনে ডেটা পাস করে: যানবাহন, স্টপ বা টাস্ক। এটি তখন মার্কার উপাদানের বর্তমান অবস্থার উপর ভিত্তি করে মার্কার স্টাইল পরিবর্তন করতে দেয়; উদাহরণস্বরূপ, অবশিষ্ট স্টপের সংখ্যা বা কাজের ধরন। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকে ডেটার বিরুদ্ধে যোগ দিতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কার স্টাইল করতে পারেন।

উপরন্তু, মার্কার দৃশ্যমানতা ফিল্টার করতে আপনি কাস্টমাইজেশন ফাংশন ব্যবহার করতে পারেন। এটি করার জন্য, মার্কারে setVisible(false) কল করুন।

যাইহোক, কার্যক্ষমতার কারণে, আমরা লোকেশন প্রদানকারীতে নেটিভ ফিল্টারিং দিয়ে ফিল্টার করার সুপারিশ করি, যেমন FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter । এটি বলেছে, যখন আপনার অতিরিক্ত ফিল্টারিং কার্যকারিতার প্রয়োজন হয়, আপনি কাস্টমাইজেশন ফাংশন ব্যবহার করে ফিল্টারিং প্রয়োগ করতে পারেন।

ফ্লিট ট্র্যাকিং লাইব্রেরি নিম্নলিখিত কাস্টমাইজেশন পরামিতি প্রদান করে:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

MarkerOptions ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন

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

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন

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

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

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

দৃশ্যমান মার্কার ফিল্টার করুন

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

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

ডেলিভারি গাড়ি অনুসরণ করার সময় পলিলাইন কাস্টমাইজেশন ব্যবহার করুন

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

মার্কার কাস্টমাইজেশনের অনুরূপ, আপনি PolylineOptions একটি সেট নির্দিষ্ট করতে পারেন যাতে তারা তৈরি করা বা আপডেট করা হয় তখন সমস্ত মিলে যাওয়া Polyline অবজেক্টগুলিতে প্রয়োগ করা হয়।

একইভাবে, আপনি একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করতে পারেন। কাস্টমাইজেশন ফাংশনগুলি ফ্লিট ইঞ্জিন দ্বারা প্রেরিত ডেটার উপর ভিত্তি করে বস্তুর পৃথক স্টাইল করার অনুমতি দেয়। ফাংশন বর্তমান গাড়ির অবস্থার উপর ভিত্তি করে প্রতিটি বস্তুর স্টাইলিং পরিবর্তন করতে পারে; উদাহরণস্বরূপ, Polyline বস্তুটিকে একটি গভীর ছায়ায় রঙ করা, বা গাড়িটি ধীর গতিতে চলার সময় এটিকে ঘন করা। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকেও যোগ দিতে পারেন এবং সেই তথ্যের ভিত্তিতে Polyline অবজেক্টকে স্টাইল করতে পারেন।

আপনি FleetEngineDeliveryVehicleLocationProviderOptions এ প্রদত্ত প্যারামিটার ব্যবহার করে কাস্টমাইজেশন নির্দিষ্ট করতে পারেন। আপনি গাড়ির যাত্রায় বিভিন্ন পাথ স্টেটের জন্য কাস্টমাইজেশন সেট করতে পারেন -- ইতিমধ্যে ভ্রমণ করেছেন, সক্রিয়ভাবে ভ্রমণ করছেন বা এখনও ভ্রমণ করেননি। পরামিতিগুলি নিম্নরূপ:

• takenPolylineCustomization , একটি ইতিমধ্যে ভ্রমণ পথের জন্য;
• activePolylineCustomization , একটি সক্রিয়ভাবে ভ্রমণ পথের জন্য;
• remainingPolylineCustomization , এখনও ভ্রমণ করা হয়নি এমন পথের জন্য।

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.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 বস্তুর দৃশ্যমানতা নিয়ন্ত্রণ করুন

ডিফল্টরূপে, সমস্ত Polyline বস্তু দৃশ্যমান। একটি Polyline বস্তুকে অদৃশ্য করতে, এর visible সম্পত্তি সেট করুন:

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

remainingPolylineCustomization = {visible: false};

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

remainingPolylineCustomization = {visible: false};

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

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

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

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

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

স্বয়ংক্রিয় ফিটিং অক্ষম করুন

আপনি স্বয়ংক্রিয় ফিটিং অক্ষম করে মানচিত্রটিকে গাড়ি এবং প্রত্যাশিত রুটে স্বয়ংক্রিয়ভাবে ভিউপোর্ট ফিট করা থেকে থামাতে পারেন। নিচের উদাহরণটি দেখায় কিভাবে আপনি যখন যাত্রা শেয়ারিং ম্যাপ ভিউ কনফিগার করেন তখন স্বয়ংক্রিয় ফিটিং অক্ষম করতে হয়।

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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করুন

আপনি একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করতে পারেন যাতে চিহ্নিতকারী বা অন্যান্য কাস্টমাইজেশনগুলি অন্তর্ভুক্ত থাকে সেই কাস্টমাইজেশনগুলি না হারিয়ে৷

উদাহরণস্বরূপ, ধরুন আপনার কাছে একটি মানক google.maps.Map সত্তা সহ একটি ওয়েব পৃষ্ঠা রয়েছে যেখানে একটি মার্কার দেখানো হয়েছে:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি যোগ করতে, যার মধ্যে রয়েছে ফ্লিট ট্র্যাকিং:

1. প্রমাণীকরণ টোকেন কারখানার জন্য কোড যোগ করুন।
2. initMap() ফাংশনে একটি অবস্থান প্রদানকারী চালু করুন।
3. initMap() ফাংশনে ম্যাপ ভিউ শুরু করুন। ভিউ মানচিত্র ধারণ করে.
4. ম্যাপ ভিউ ইনিশিয়ালাইজেশনের জন্য কলব্যাক ফাংশনে আপনার কাস্টমাইজেশন সরান।
5. API লোডারে অবস্থান লাইব্রেরি যোগ করুন।

নিম্নলিখিত উদাহরণটি করা পরিবর্তনগুলি দেখায়:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

আপনি যদি উলুরুর কাছে নির্দিষ্ট আইডি সহ একটি ডেলিভারি গাড়ি চালান তবে এটি এখন মানচিত্রে রেন্ডার করা হবে।