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.

Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Visualizzare immagini e annotazioni

Sviluppatori dello Spazio economico europeo (SEE)

L'endpoint SearchDestinations dell'API Geocoding fornisce un contesto iperlocale, inclusi punti di navigazione e ingressi. Per migliorare l'esperienza utente, la risposta può includere parametri per l'API Street View Static, consentendoti 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 evidenza

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

Campo	Descrizione	Parametro API statico
`pano`	Un ID panorama specifico.	`pano`
`widthPx`	Larghezza suggerita per l'immagine.	`size` (parte della larghezza)
`heightPx`	Altezza suggerita per l'immagine.	`size` (parte dell'altezza)
`headingDegree`	Orientamento della fotocamera (0-360).	`heading`
`pitchDegree`	Angolazione verticale della videocamera (-90° a 90°).	`pitch`
`fovDegree`	Campo visivo orizzontale (0-120).	`fov`

Richiedere un'immagine

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

URL di esempio

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

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

Codice campione: TypeScript

La seguente funzione TypeScript mostra come costruire l'URL dell'API Static Street View 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 delle immagini

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

Queste annotazioni sono destinate al rendering lato client. Puoi utilizzarli 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 all'API Static utilizzando size specificato da widthPx e heightPx.

Codice campione: annotazioni di disegno (TypeScript e SVG)

Questo esempio mostra come utilizzare TypeScript e SVG per sovrapporre il poligono di annotazione dell'ingresso all'immagine di 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 il tuo feedback all'indirizzo geocoding-feedback-channel@google.com.