Bilder und Anmerkungen anzeigen

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

Bilder und Anmerkungen anfordern

Wenn Sie Bild- und Annotationsinformationen erhalten möchten, müssen Sie die folgenden Felder in den X-Goog-FieldMask-Header aufnehmen:

• destinations.navigationPoints.streetViewThumbnail
• destinations.navigationPoints.entranceAnnotation
• destinations.entrances.streetViewThumbnail
• destinations.entrances.streetViewAnnotation

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 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:

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

Bildanmerkungen

Wenn ein Entrance oder ein NavigationPoint zurückgegeben wird, kann es auch eine Bildanmerkung des entsprechenden Eingangs im Feld streetViewAnnotation oder entranceAnnotation enthalten. Dies liefert Pixelkoordinaten für ein Polygon, das den Eingang im Vorschaubild umreißt.

Diese Anmerkungen sind für das clientseitige Rendern 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 Anmerkungen

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 wird, müssen Sie das Bild über die Static API mit dem size anfordern, der von widthPx und heightPx angegeben wird.

Beispielcode: Zeichnen von Anmerkungen (TypeScript und SVG)

In diesem Beispiel wird gezeigt, wie Sie mit TypeScript und SVG das Annotationspolygon für den Eingang auf das Street View-Bild legen.

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);

<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.