Les méthodes de l'API Geocoding v4 sont limitées à 25 requêtes par seconde (RPS) par défaut. Pour savoir comment demander un quota plus élevé, consultez Afficher et gérer les quotas, puis sélectionnez API Geocoding comme service.

Afficher les images et les annotations

Développeurs de l'Espace économique européen (EEE)

Le point de terminaison SearchDestinations de l'API Geocoding fournit un contexte hyperlocal, y compris des points de navigation et des entrées. Pour améliorer l'expérience utilisateur, la réponse peut inclure des paramètres pour l'API Street View Static, ce qui vous permet d'afficher des images pertinentes pour ces lieux.

Demander des images et des annotations

Pour recevoir des informations sur les images et les annotations, vous devez inclure les champs suivants dans l'en-tête X-Goog-FieldMask :

Exemple de requête 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

Exemple de réponse 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Champs mis en avant

Les objets Entrance et NavigationPoint de la réponse peuvent contenir un champ streetViewThumbnail avec les champs suivants :

Champ	Description	Paramètre d'API statique
`pano`	ID d'un panorama spécifique.	`pano`
`widthPx`	Largeur suggérée pour l'image.	`size` (partie de la largeur)
`heightPx`	Hauteur suggérée pour l'image.	`size` (partie de la hauteur)
`headingDegree`	Direction indiquée par la boussole dans la vue de la caméra (0 à 360).	`heading`
`pitchDegree`	Angle haut/bas de la caméra (de -90 à 90).	`pitch`
`fovDegree`	Champ de vision horizontal (0 à 120).	`fov`

Demander une image

Pour demander une image Street View, utilisez les valeurs de l'objet streetViewThumbnail afin de créer une URL pour l'API Street View Static.

Exemple d'URL

Voici un exemple d'URL de l'API Street View Static :

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

Exemple de code : TypeScript

La fonction TypeScript suivante montre comment construire l'URL de l'API Static Street View à partir de la sortie du point de terminaison 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()}`;
}

Annotations d'images

Si un Entrance ou un NavigationPoint est renvoyé, il peut également inclure une annotation d'image de l'entrée correspondante dans le champ streetViewAnnotation ou entranceAnnotation. Cela fournit les coordonnées en pixels d'un polygone qui décrit l'entrée dans la vignette de l'image.

Ces annotations sont destinées au rendu côté client. Vous pouvez les utiliser pour dessiner une superposition (par exemple, à l'aide de SVG ou d'un <canvas>) au-dessus de l'image renvoyée par l'API Static.

Système de coordonnées d'annotation

L'origine (0,0) correspond à l'angle supérieur gauche de l'image.

xPx : distance horizontale par rapport au bord gauche.
yPx : distance verticale par rapport au bord supérieur.

Pour vous assurer que le polygone est correctement aligné, vous devez demander l'image à l'API Static en utilisant le size spécifié par widthPx et heightPx.

Exemple de code : annotations de dessin (TypeScript et SVG)

Cet exemple montre comment utiliser TypeScript et SVG pour superposer le polygone d'annotation de l'entrée sur l'image 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>

Le résultat doit ressembler à ceci :

Commentaires

Il s'agit d'une fonctionnalité expérimentale de l'API Geocoding. N'hésitez pas à nous faire part de vos commentaires à l'adresse geocoding-feedback-channel@google.com.