ছবি ও অ্যানোটেশন দেখানো

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

Geocoding API-এর SearchDestinations এন্ডপয়েন্ট হাইপারলোকাল প্রসঙ্গ প্রদান করে, যার মধ্যে নেভিগেশন পয়েন্ট ও প্রবেশপথ অন্তর্ভুক্ত। ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, উত্তরে Street View Static API-এর জন্য প্যারামিটার অন্তর্ভুক্ত থাকতে পারে, যা আপনাকে এইসব লোকেশনের জন্য প্রাসঙ্গিক ছবি দেখানোর অনুমতি দেয়।

ছবি ও অ্যানোটেশনের জন্য অনুরোধ করুন

ছবি ও অ্যানোটেশন সংক্রান্ত তথ্য পেতে, আপনাকে অবশ্যই 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 ফিল্ড থাকতে পারে:

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

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

Street View ছবির জন্য অনুরোধ করতে, streetViewThumbnail অবজেক্ট থেকে পাওয়া ভ্যালু ব্যবহার করে Street View Static API-এর জন্য URL তৈরি করুন।

URL উদাহরণ

নিচে Street View Static API URL-এর একটি উদাহরণ দেওয়া হল:

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

স্যাম্পেল কোড: TypeScript

নিম্নলিখিত TypeScript ফাংশনটি দেখায় যে কীভাবে Destinations এন্ডপয়েন্ট আউটপুট থেকে স্ট্যাটিক Street View API URL তৈরি করা যায়।

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 থেকে ছবির জন্য অনুরোধ করতেই হবে।

স্যাম্পেল কোড: অ্যানোটেশন আঁকা (TypeScript এবং SVG)

এই উদাহরণে দেখানো হয়েছে যে Street View ছবিতে প্রবেশপথের অ্যানোটেশন পলিগন ওভারলে করতে কীভাবে TypeScript ও SVG ব্যবহার করতে হয়।

TypeScript

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

HTML

<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>

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

Google NYC Street View

মতামত

এটি Geocoding API-এর একটি পরীক্ষামূলক ফিচার। আমরা geocoding-feedback-channel@google.com-এ মতামত পেলে খুশি হব।