แสดงภาพและคำอธิบายประกอบ

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

ปลายทาง SearchDestinations ของ Geocoding API มีบริบทที่เจาะจงเฉพาะพื้นที่ ซึ่งรวมถึงจุดนำทางและทางเข้า เพื่อปรับปรุงประสบการณ์ของผู้ใช้ คำตอบอาจมีพารามิเตอร์สำหรับ 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 ที่มีฟิลด์ต่อไปนี้

ช่อง คำอธิบาย พารามิเตอร์ API แบบคงที่
pano รหัสพาโนรามาที่เฉพาะเจาะจง pano
widthPx ความกว้างที่แนะนําสําหรับรูปภาพ size (ส่วนความกว้าง)
heightPx ความสูงที่แนะนำสำหรับรูปภาพ size (ส่วนสูง)
headingDegree เข็มทิศที่มีทิศทางไปยังกล้องถ่ายรูป (0-360) heading
pitchDegree มุมขึ้น/ลงของกล้อง (-90 ถึง 90) pitch
fovDegree ขอบเขตการมองเห็นในแนวนอน (0-120) fov

ขอรูปภาพ

หากต้องการขอภาพ Street View ให้ใช้ค่าจากstreetViewThumbnail ออบเจ็กต์เพื่อสร้าง URL สำหรับ Street View Static API

URL ตัวอย่าง

ตัวอย่าง URL ของ Street View Static 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

ฟังก์ชัน TypeScript ต่อไปนี้แสดงวิธีสร้าง URL ของ Static Street View API จากเอาต์พุตของปลายทาง Destinations

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: ระยะห่างในแนวตั้งจากขอบบน

คุณต้องขอรูปภาพจาก Static API โดยใช้ size ที่ระบุโดย widthPx และ heightPx เพื่อให้แน่ใจว่ารูปหลายเหลี่ยมสอดคล้องกันอย่างถูกต้อง

โค้ดตัวอย่าง: การวาดคำอธิบายประกอบ (TypeScript และ SVG)

ตัวอย่างนี้แสดงวิธีใช้ TypeScript และ SVG เพื่อซ้อนทับรูปหลายเหลี่ยมของคำอธิบายประกอบทางเข้า บนรูปภาพ Street View

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