Menampilkan gambar dan anotasi

Developer Wilayah Ekonomi Eropa (EEA)

Endpoint SearchDestinations Geocoding API memberikan konteks hiperlokal, termasuk titik navigasi dan pintu masuk. Untuk meningkatkan pengalaman pengguna, respons dapat menyertakan parameter untuk Street View Static API, sehingga Anda dapat menampilkan gambar yang relevan untuk lokasi ini.

Meminta gambar dan anotasi

Untuk menerima informasi gambar dan anotasi, Anda harus menyertakan kolom berikut ke header X-Goog-FieldMask:

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

Contoh respons 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Objek Entrance dan NavigationPoint dalam respons dapat berisi kolom streetViewThumbnail dengan kolom berikut:

Kolom Deskripsi Parameter API Statis
pano ID panorama tertentu. pano
widthPx Lebar yang disarankan untuk gambar. size (bagian lebar)
heightPx Tinggi yang disarankan untuk gambar. size (bagian tinggi)
headingDegree Arah kompas kamera (0-360). heading
pitchDegree Sudut atas/bawah kamera (-90 hingga 90). pitch
fovDegree Ruang pandang horizontal (0-120). fov

Meminta gambar

Untuk meminta gambar Street View, gunakan nilai dari objek streetViewThumbnail untuk membuat URL bagi Street View Static API.

Contoh URL

Berikut adalah contoh URL Street View Static API yang dibuat:

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

Contoh kode: TypeScript

Fungsi TypeScript berikut menunjukkan cara membuat URL Static Street View API dari output endpoint 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()}`;
}

Anotasi gambar

Jika Entrance atau NavigationPoint ditampilkan, atau tersebut juga dapat menyertakan anotasi gambar pintu masuk yang sesuai di streetViewAnnotation atau kolom entranceAnnotation. Hal ini memberikan koordinat piksel untuk poligon yang menguraikan pintu masuk dalam gambar thumbnail.

Anotasi ini ditujukan untuk rendering sisi klien. Anda dapat menggunakannya untuk menggambar overlay (misalnya, menggunakan SVG atau <canvas>) di atas gambar yang ditampilkan oleh Static API.

Sistem koordinat anotasi

Asal (0,0) adalah sudut kiri atas gambar.

  • xPx: Jarak horizontal dari tepi kiri.
  • yPx: Jarak vertikal dari tepi atas.

Untuk memastikan poligon sejajar dengan benar, Anda harus meminta gambar dari Static API menggunakan size yang ditentukan oleh widthPx dan heightPx.

Kode contoh: Menggambar anotasi (TypeScript dan SVG)

Contoh ini menunjukkan cara menggunakan TypeScript dan SVG untuk menempatkan poligon anotasi pintu masuk di atas gambar 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>

Anda akan melihat sesuatu yang mirip dengan ini:

Google Street View NYC

Masukan

Ini adalah fitur eksperimental Geocoding API. Kami akan sangat menghargai masukan Anda di geocoding-feedback-channel@google.com.