I metodi dell'API Geocoding v4 hanno una quota predefinita di 25 query al secondo (QPS). Per informazioni su come richiedere una quota più elevata, vedi Visualizza e gestisci le quote e seleziona API Geocoding come servizio.

Visualizzare immagini e annotazioni

Sviluppatori dello Spazio economico europeo (SEE)

L'endpoint dell'API Geocoding SearchDestinations fornisce un contesto iperlocale, inclusi punti di navigazione e ingressi. Per migliorare l'esperienza utente, la risposta può includere parametri per la Street View Static API, che ti consente di visualizzare immagini pertinenti per queste località.

Richiedere immagini e annotazioni

Per ricevere informazioni su immagini e annotazioni, devi includere i seguenti campi nell'intestazione X-Goog-FieldMask:

Esempio di richiesta 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

Esempio di risposta 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Campi in primo piano

Gli oggetti Entrance e NavigationPoint nella risposta possono contenere un campo streetViewThumbnail con i seguenti campi:

Campo	Descrizione	Parametro API statico
`pano`	Un ID panoramica specifico.	`pano`
`widthPx`	Larghezza consigliata per l'immagine.	`size` (parte della larghezza)
`heightPx`	Altezza consigliata per l'immagine.	`size` (parte dell'altezza)
`headingDegree`	Orientamento della fotocamera (0-360).	`heading`
`pitchDegree`	Angolo di inclinazione della fotocamera (da -90 a 90).	`pitch`
`fovDegree`	Campo visivo orizzontale (0-120).	`fov`

Richiedere un'immagine

Per richiedere un'immagine Street View, utilizza i valori dell'streetViewThumbnail oggetto per creare un URL per la Street View Static API.

URL di esempio

Di seguito è riportato un esempio di URL della Street View Static API creato:

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

Codice campione: TypeScript

La seguente funzione TypeScript mostra come creare l'URL della Street View Static API dall'output dell'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()}`;
}

Annotazioni immagine

Se viene restituito un Entrance o un NavigationPoint, può includere anche un'annotazione immagine dell'ingresso corrispondente nel campo streetViewAnnotation o entranceAnnotation. Vengono fornite le coordinate dei pixel per un poligono che delinea l'ingresso all'interno dell'immagine miniatura.

Queste annotazioni sono destinate al rendering lato client. Puoi utilizzare le per disegnare una sovrapposizione (ad esempio utilizzando SVG o un <canvas>) sopra l'immagine restituita dall'API Static.

Sistema di coordinate delle annotazioni

L'origine (0,0) è l'angolo in alto a sinistra dell'immagine.

xPx: distanza orizzontale dal bordo sinistro.
yPx: distanza verticale dal bordo superiore.

Per assicurarti che il poligono sia allineato correttamente, devi richiedere l'immagine dall'API Static utilizzando le size specificate da widthPx e heightPx.

Codice campione: disegnare annotazioni (TypeScript e SVG)

Questo esempio mostra come utilizzare TypeScript e SVG per sovrapporre il poligono di annotazione dell'ingresso all'immagine 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>

Dovresti vedere qualcosa di simile a questo:

Feedback

Questa è una funzionalità sperimentale dell'API Geocoding. Apprezziamo i feedback all'indirizzo geocoding-feedback-channel@google.com.