نمایش تصاویر و یادداشت‌ها

توسعه‌دهندگان منطقه اقتصادی اروپا (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 با فیلدهای زیر باشند:

فیلد شرح پارامتر میانای برنامه‌سازی کاربردی ایستا
pano شناسه تمام‌نمای خاص. pano
widthPx عرض پیشنهادی برای تصویر. size (بخش پهنا)
heightPx ارتفاع پیشنهادی برای تصویر. size (بخش ارتفاع)
headingDegree جهت قطب‌نمای دوربین (۰-۳۶۰). heading
pitchDegree زاویه بالا/پایین دوربین (۹۰- تا ۹۰). pitch
fovDegree میدان دید افقی (۰-۱۲۰). fov

درخواست تصویر

برای درخواست تصویر «نمای خیابان»، از مقادیر شیء streetViewThumbnail برای ساختن نشانی وب برای Street View Static API استفاده کنید.

نشانی وب نمونه

در زیر نمونه‌ای از نشانی وب Street View Static API ساخته‌شده را می‌بینید:

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

کد نمونه: TypeScript

تابع TypeScript زیر نشان می‌دهد که چگونه نشانی وب Static Street View API را از خروجی نقطه پایان «مقصدها» بسازید.

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 نیز باشد. این گزینه مختصات پیکسل را برای چندضلعی‌ای ارائه می‌دهد که ورودی را در تصویر کوچک مشخص می‌کند.

این حاشیه‌نویسی‌ها برای پرداز طرف مشتری درنظر گرفته شده‌اند. می‌توانید از آن‌ها برای ترسیم رونهاد (مثلاً بااستفاده از SVG یا <canvas>) روی تصویر برگردانده‌شده توسط Static API استفاده کنید.

سیستم مختصات حاشیه‌نویسی

مبدأ (0,0) گوشه بالا سمت چپ تصویر است.

  • ‫xPx: فاصله افقی از لبه چپ.
  • yPx: فاصله عمودی از لبه بالا.

برای اطمینان از اینکه چندضلعی به‌درستی تراز شده است، باید تصویر را از Static API بااستفاده از size مشخص‌شده توسط widthPx و heightPx درخواست کنید.

نمونه کد: حاشیه‌نویسی‌های طراحی (TypeScript و SVG)

این مثال نشان می‌دهد که چگونه از 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» در نیویورک

بازخورد

این ویژگی آزمایشی Geocoding API است. از بازخورد شما در geocoding-feedback-channel@google.com قدردانی می‌کنیم.