نمایش تصاویر و توضیحات

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

نقطه پایانی SearchDestinations در API مربوط به Geocoding، زمینه فرامحلی، شامل نقاط ناوبری و ورودی‌ها را فراهم می‌کند. برای بهبود تجربه کاربر، پاسخ می‌تواند شامل پارامترهایی برای 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 با فیلدهای زیر باشند:

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

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

برای درخواست تصویر نمای خیابان، از مقادیر شیء streetViewThumbnail برای ساخت URL برای API نمای خیابان استاتیک استفاده کنید.

آدرس اینترنتی مثال

در زیر مثالی از یک URL API استاتیک نمای خیابان ساخته شده آمده است:

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

نمونه کد: تایپ اسکریپت

تابع TypeScript زیر نحوه ساخت URL 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> ) روی تصویری که توسط API استاتیک برگردانده شده است، استفاده کنید.

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

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

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

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

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

این مثال نحوه استفاده از TypeScript و SVG را برای همپوشانی چندضلعی حاشیه‌نویسی ورودی در تصویر نمای خیابان نشان می‌دهد.

تایپ اسکریپت 

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>

شما باید چیزی شبیه به این را ببینید:

نمای خیابان گوگل نیویورک

بازخورد

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