চিত্রাবলী এবং টীকা প্রদর্শন করুন

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA) ডেভেলপাররা

জিওকোডিং এপিআই-এর SearchDestinations এন্ডপয়েন্টটি নেভিগেশন পয়েন্ট এবং প্রবেশপথ সহ অতি-স্থানীয় প্রেক্ষাপট প্রদান করে। ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য, রেসপন্সে স্ট্রিট ভিউ স্ট্যাটিক এপিআই- এর প্যারামিটার অন্তর্ভুক্ত করা যেতে পারে, যা আপনাকে এই অবস্থানগুলির জন্য প্রাসঙ্গিক চিত্রাবলী প্রদর্শন করার সুযোগ দেয়।

ছবি এবং টীকা অনুরোধ করুন

চিত্রাবলী এবং টীকা-তথ্য পেতে হলে, আপনাকে অবশ্যই X-Goog-FieldMask হেডারে নিম্নলিখিত ফিল্ডগুলি অন্তর্ভুক্ত করতে হবে:

উদাহরণ cURL অনুরোধ 

curl -X POST -d '{
  "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg"
}' \
-H 'Content-Type: application/json' \
-H "X-Goog-Api-Key: API_KEY" \
-H "X-Goog-FieldMask: destinations.navigationPoints.streetViewThumbnail,destinations.navigationPoints.entranceAnnotation,destinations.entrances.streetViewThumbnail,destinations.entrances.streetViewAnnotation" \
https://geocode.googleapis.com/v4alpha/geocode/destinations

JSON প্রতিক্রিয়ার উদাহরণ 

{
  "destinations": [
    {
      "entrances": [
        {
          "location": {
            "latitude": 40.7406763,
            "longitude": -74.0020733
          },
          "tags": [
            "PREFERRED"
          ],
          "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg",
          "streetViewThumbnail": {
            "pano": "EUKaIR67fBVmpsHnXuIevA",
            "widthPx": 400,
            "heightPx": 600,
            "headingDegree": 331.06186,
            "fovDegree": 60
          },
          "streetViewAnnotation": {
            "coordinates": [
              {
                "xPx": 184.7,
                "yPx": 290.4
              },
              {
                "xPx": 213.3,
                "yPx": 289.4
              },
              {
                "xPx": 214.8,
                "yPx": 330.8
              },
              {
                "xPx": 186.0,
                "yPx": 332.5
              }
            ]
          }
        }
      ]
    }
  ]
}

রেসপন্সের Entrance এবং NavigationPoint অবজেক্টগুলোতে একটি streetViewThumbnail ফিল্ড থাকতে পারে, যার মধ্যে নিম্নলিখিত ফিল্ডগুলো অন্তর্ভুক্ত থাকে:

মাঠ বর্ণনা স্ট্যাটিক এপিআই প্যারামিটার
pano একটি নির্দিষ্ট প্যানোরামা আইডি। pano
widthPx ছবির জন্য প্রস্তাবিত প্রস্থ। size (প্রস্থ অংশ)
heightPx ছবিটির জন্য প্রস্তাবিত উচ্চতা। size (উচ্চতার অংশ)
headingDegree ক্যামেরার কম্পাস দিক (০-৩৬০)। heading
pitchDegree ক্যামেরার ঊর্ধ্ব/নিম্ন কোণ (-৯০ থেকে ৯০)। pitch
fovDegree অনুভূমিক দৃশ্যক্ষেত্র (০-১২০)। fov

একটি ছবির জন্য অনুরোধ করুন

স্ট্রিট ভিউ ইমেজ অনুরোধ করতে, স্ট্রিট ভিউ স্ট্যাটিক এপিআই-এর জন্য একটি ইউআরএল তৈরি করতে streetViewThumbnail অবজেক্টের মানগুলি ব্যবহার করুন।

উদাহরণ ইউআরএল

নিম্নলিখিতটি একটি নির্মিত স্ট্রিট ভিউ স্ট্যাটিক এপিআই ইউআরএল-এর উদাহরণ:

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

নমুনা কোড: টাইপস্ক্রিপ্ট

নিম্নলিখিত টাইপস্ক্রিপ্ট ফাংশনটি দেখায় কিভাবে ডেস্টিনেশনস এন্ডপয়েন্ট আউটপুট থেকে স্ট্যাটিক স্ট্রিট ভিউ এপিআই ইউআরএল তৈরি করতে হয়।

interface StreetViewThumbnail {
  pano: string;
  widthPx: number;
  heightPx: number;
  headingDegree: number;
  pitchDegree: number;
  fovDegree: number;
}

function getStreetViewUrl(thumbnail: StreetViewThumbnail, apiKey: string): string {
  const params = new URLSearchParams({
    size: `${thumbnail.widthPx}x${thumbnail.heightPx}`,
    pano: thumbnail.pano,
    heading: thumbnail.headingDegree.toString(),
    pitch: thumbnail.pitchDegree.toString(),
    fov: thumbnail.fovDegree.toString(),
    key: apiKey,
  });

  return `https://maps.googleapis.com/maps/api/streetview?${params.toString()}`;
}

ছবির টীকা

যদি কোনো Entrance বা NavigationPoint ফেরত দেওয়া হয়, তবে এটি streetViewAnnotation বা entranceAnnotation ফিল্ডে সংশ্লিষ্ট প্রবেশপথের একটি ইমেজ অ্যানোটেশনও অন্তর্ভুক্ত করতে পারে। এটি একটি বহুভুজের জন্য পিক্সেল স্থানাঙ্ক প্রদান করে, যা থাম্বনেইল ইমেজের মধ্যে প্রবেশপথটিকে চিহ্নিত করে।

এই অ্যানোটেশনগুলো ক্লায়েন্ট-সাইড রেন্ডারিং-এর জন্য তৈরি। স্ট্যাটিক এপিআই (Static API) থেকে প্রাপ্ত ছবির উপরে একটি ওভারলে (যেমন, SVG বা একটি <canvas> ব্যবহার করে) আঁকার জন্য আপনি এগুলো ব্যবহার করতে পারেন।

টীকা স্থানাঙ্ক ব্যবস্থা

মূলবিন্দু (0,0) হলো ছবিটির উপরের-বাম কোণ ।

  • xPx : বাম প্রান্ত থেকে আনুভূমিক দূরত্ব।
  • yPx : উপরের প্রান্ত থেকে উল্লম্ব দূরত্ব।

পলিগনটি যাতে সঠিকভাবে সারিবদ্ধ হয়, তা নিশ্চিত করতে আপনাকে অবশ্যই widthPx এবং heightPx দ্বারা নির্দিষ্ট size ব্যবহার করে স্ট্যাটিক এপিআই (Static API) থেকে ছবিটির জন্য অনুরোধ করতে হবে ।

নমুনা কোড: টীকা অঙ্কন (টাইপস্ক্রিপ্ট এবং এসভিজি)

এই উদাহরণটি দেখায় কিভাবে টাইপস্ক্রিপ্ট এবং এসভিজি ব্যবহার করে স্ট্রিট ভিউ ছবির উপর প্রবেশপথের টীকা বহুভুজটি স্থাপন করা যায়।

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

interface Coordinate {
  xPx: number;
  yPx: number;
}

interface StreetViewAnnotation {
  coordinates: Coordinate[];
}

function drawAnnotations(annotation: StreetViewAnnotation, width: number, height: number) {
  const svg = document.getElementById('annotation-overlay') as unknown as SVGSVGElement;
  const polygon = document.getElementById('entrance-polygon') as unknown as SVGPolygonElement;

  // Set SVG dimensions to match the image
  svg.setAttribute('width', width.toString());
  svg.setAttribute('height', height.toString());
  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);

  // Construct points string for the polygon
  const points = annotation.coordinates
    .map(coord => `${coord.xPx},${coord.yPx}`)
    .join(' ');

  polygon.setAttribute('points', points);
}

// Example usage:
const annotation = {
  coordinates: [
    {xPx: 184.7, yPx: 290.4},
    {xPx: 213.3, yPx: 289.4},
    {xPx: 214.8, yPx: 330.8},
    {xPx: 186.0, yPx: 332.5}
  ]
};
drawAnnotations(annotation, 400, 600);

এইচটিএমএল 

<div style="position: relative; display: inline-block;">
  <!-- The Street View image from the previous step -->
  <img id="street-view-image" src="STREET_VIEW_IMAGE" alt="Street View" style="display: block;">

  <!-- SVG overlay for annotations -->
  <svg id="annotation-overlay" style="position: absolute; top: 0; left: 0; pointer-events: none;">
    <polygon id="entrance-polygon" points="" style="fill:rgba(0, 255, 17, 0.3);stroke:rgba(0, 255, 17, 0.9);stroke-width:3" />
  </svg>
</div>

আপনি এর মতো কিছু দেখতে পাবেন:

গুগল এনওয়াইসি স্ট্রিট ভিউ

প্রতিক্রিয়া

এটি জিওকোডিং এপিআই-এর একটি পরীক্ষামূলক বৈশিষ্ট্য। geocoding-feedback-channel@google.com -এ আপনার মতামত জানালে আমরা কৃতজ্ঞ থাকব।