Für die Methoden der Geocoding API v4 gilt ein Standardkontingent von 25 Abfragen pro Sekunde (Queries per Second, QPS). Informationen zum Anfordern eines höheren Kontingents finden Sie unter Kontingente ansehen und verwalten. Wählen Sie als Dienst Geocoding API aus.

Bilder und Anmerkungen anzeigen

Entwickler im Europäischen Wirtschaftsraum (EWR)

Der SearchDestinations Endpunkt der Geocoding API bietet hyperlokalen Kontext, einschließlich Navigationspunkten und Eingängen. Um die Nutzererfahrung zu verbessern, kann die Antwort Parameter für die Street View Static API enthalten, mit denen Sie relevante Bilder für diese Orte anzeigen können.

Bilder und Annotationen anfordern

Wenn Sie Bilder und Annotationsinformationen erhalten möchten, müssen Sie die folgenden Felder in die X-Goog-FieldMask-Kopfzeile einfügen:

Beispiel für eine cURL-Anfrage

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

Beispiel für eine JSON-Antwort

{
  "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
              }
            ]
          }
        }
      ]
    }
  ]
}

Hervorgehobene Felder

Die Objekte Entrance und NavigationPoint in der Antwort können ein streetViewThumbnail-Feld mit den folgenden Feldern enthalten:

Feld	Beschreibung	Statischer API-Parameter
`pano`	Eine bestimmte Panorama-ID.	`pano`
`widthPx`	Empfohlene Breite für das Bild.	`size` (Breite)
`heightPx`	Empfohlene Höhe für das Bild.	`size` (Höhe)
`headingDegree`	Kompasskurs der Kamera (0–360).	`heading`
`pitchDegree`	Winkel der Kamera nach oben/unten (-90 bis 90).	`pitch`
`fovDegree`	Horizontales Sichtfeld (0–120).	`fov`

Bild anfordern

Wenn Sie ein Street View-Bild anfordern möchten, verwenden Sie die Werte aus dem streetViewThumbnail Objekt, um eine URL für die Street View Static API zu erstellen.

Beispiel-URL

Im Folgenden sehen Sie ein Beispiel für eine erstellte Street View Static API-URL:

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

Beispielcode: TypeScript

Die folgende TypeScript-Funktion zeigt, wie die Static Street View API-URL aus der Ausgabe des Endpunkts „Destinations“ erstellt wird.

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()}`;
}

Bildannotationen

Wenn ein Entrance oder ein NavigationPoint zurückgegeben wird, kann er auch eine Bildannotation des entsprechenden Eingangs im Feld streetViewAnnotation oder entranceAnnotation enthalten. Dabei werden Pixelkoordinaten für ein Polygon angegeben, das den Eingang im Miniaturbild umreißt.

Diese Annotationen sind für das clientseitige Rendering vorgesehen. Sie können damit ein Overlay (z. B. mit SVG oder einem <canvas>) über das von der Static API zurückgegebene Bild zeichnen.

Koordinatensystem für Annotationen

Der Ursprung (0,0) ist die obere linke Ecke des Bildes.

xPx: Horizontaler Abstand vom linken Rand.
yPx: Vertikaler Abstand vom oberen Rand.

Damit das Polygon richtig ausgerichtet ist, müssen Sie das Bild von der Static API mit der size anfordern, die durch widthPx und heightPx angegeben wird.

Beispielcode: Annotationen zeichnen (TypeScript und SVG)

In diesem Beispiel wird gezeigt, wie Sie mit TypeScript und SVG das Polygon für die Eingangsannotation über das Street View-Bild legen.

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>

Die Ausgabe sollte etwa so aussehen:

Feedback

Dies ist eine experimentelle Funktion der Geocoding API. Wir freuen uns über Feedback unter geocoding-feedback-channel@google.com.