Metode Geocoding API v4 memiliki kuota default 25 kueri per detik (QPS). Untuk mengetahui informasi tentang cara meminta kuota yang lebih tinggi, lihat Melihat dan mengelola kuota, lalu pilih Geocoding API sebagai layanan.

Menampilkan gambar dan anotasi

Developer Wilayah Ekonomi Eropa (EEA)

Endpoint Geocoding API SearchDestinations menyediakan 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Kolom unggulan

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 streetViewThumbnail objek 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=YOUR_API_KEY&signature=YOUR_SIGNATURE

Kode contoh: TypeScript

Fungsi TypeScript berikut menunjukkan cara membuat URL Street View API Statis dari output endpoint Tujuan.

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, anotasi gambar pintu masuk yang sesuai juga dapat disertakan di kolom streetViewAnnotation atau entranceAnnotation. Hal ini memberikan koordinat piksel untuk poligon yang menguraikan pintu masuk dalam gambar thumbnail.

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

Sistem koordinat anotasi

Asal (0,0) adalah pojok 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 melapisi poligon anotasi pintu masuk pada 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:

Masukan

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