Los métodos de la API de Geocoding v4 tienen una cuota predeterminada de 25 consultas por segundo (QPS). Para obtener información sobre cómo solicitar una cuota más alta, consulta Cómo ver y administrar cuotas y selecciona API de Geocoding como el servicio.

Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Visualiza imágenes y anotaciones

Desarrolladores del Espacio Económico Europeo (EEE)

El extremo SearchDestinations de la API de Geocoding proporciona contexto hiperlocal, incluidos los puntos de navegación y las entradas. Para mejorar la experiencia del usuario, la respuesta puede incluir parámetros para la API de Street View Static, lo que te permite mostrar imágenes pertinentes para estas ubicaciones.

Solicita imágenes y anotaciones

Para recibir información de imágenes y anotaciones, debes incluir los siguientes campos en el encabezado X-Goog-FieldMask:

Solicitud cURL de ejemplo

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

Ejemplo de respuesta 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Campos destacados

Los objetos Entrance y NavigationPoint de la respuesta pueden contener un campo streetViewThumbnail con los siguientes campos:

Campo	Descripción	Parámetro de API estático
`pano`	Un ID de panorámica específico	`pano`
`widthPx`	Es el ancho sugerido para la imagen.	`size` (parte del ancho)
`heightPx`	Es la altura sugerida para la imagen.	`size` (parte de la altura)
`headingDegree`	Es la orientación de la brújula de la cámara (0-360).	`heading`
`pitchDegree`	Es el ángulo hacia arriba o hacia abajo de la cámara (de -90 a 90).	`pitch`
`fovDegree`	Campo visual horizontal (0-120).	`fov`

Solicita una imagen

Para solicitar una imagen de Street View, usa los valores del objeto streetViewThumbnail y crea una URL para la API de Street View Static.

URL de ejemplo

A continuación, se muestra un ejemplo de una URL de la API de Street View Static construida:

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

Código de muestra: TypeScript

En la siguiente función de TypeScript, se muestra cómo construir la URL de la API de Static Street View a partir del resultado del extremo de 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()}`;
}

Anotaciones de imágenes

Si se devuelve un Entrance o un NavigationPoint, también puede incluir una anotación de imagen de la entrada correspondiente en el campo streetViewAnnotation o entranceAnnotation. Esto proporciona coordenadas de píxeles para un polígono que delimita la entrada dentro de la imagen en miniatura.

Estas anotaciones están diseñadas para la renderización del cliente. Puedes usarlas para dibujar una superposición (por ejemplo, con SVG o un <canvas>) sobre la imagen que devuelve la API de Static.

Sistema de coordenadas de anotaciones

El origen (0,0) es la esquina superior izquierda de la imagen.

xPx: Es la distancia horizontal desde el borde izquierdo.
yPx: Es la distancia vertical desde el borde superior.

Para garantizar que el polígono se alinee correctamente, debes solicitar la imagen a la API de Static Maps con el size que especifican widthPx y heightPx.

Código de muestra: Anotaciones de dibujo (TypeScript y SVG)

En este ejemplo, se muestra cómo usar TypeScript y SVG para superponer el polígono de anotación de entrada en la imagen de 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>

Deberías ver un resultado similar a este:

Comentarios

Esta es una función experimental de la API de Geocoding. Agradeceríamos que nos envíes tus comentarios a geocoding-feedback-channel@google.com.