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

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (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=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>) ที่ด้านบนของรูปภาพที่ Static 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