Der Endpunkt SearchDestinations 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, damit Sie relevante Bilder für diese Orte anzeigen können.
Bilder und Annotationen anfordern
Wenn Sie Bild- und Annotationsinformationen erhalten möchten, müssen Sie die folgenden Felder in den X-Goog-FieldMask-Header einfügen:
destinations.navigationPoints.streetViewThumbnaildestinations.navigationPoints.entranceAnnotationdestinations.entrances.streetViewThumbnaildestinations.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 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
}
]
}
}
]
}
]
}
Empfohlene 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 |
Vorgeschlagene Breite für das Bild. | size (Breitenteil) |
heightPx |
Empfohlene Höhe für das Bild. | size (Höhenteil) |
headingDegree
|
Kompasskurs der Kamera (0–360). | heading
|
pitchDegree
|
Aufwärts-/Abwärtswinkel der Kamera (-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
Hier 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 Destinations-Endpunkts 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 es auch eine Bildannotation des entsprechenden Eingangs im Feld streetViewAnnotation oder entranceAnnotation enthalten. Dadurch werden Pixelkoordinaten für ein Polygon bereitgestellt, das den Eingang im Miniaturbild umreißt.
Diese Annotationen sind für das clientseitige Rendering vorgesehen. Sie können sie verwenden, um ein Overlay (z. B. mit SVG oder einem <canvas>) über das von der Static API zurückgegebene Bild zu 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 wird, müssen Sie das Bild von der Static API mit dem size anfordern, der durch widthPx und heightPx angegeben wird.
Beispielcode: Zeichnungsannotationen (TypeScript und SVG)
In diesem Beispiel wird gezeigt, wie Sie TypeScript und SVG verwenden, um das Polygon für die Eingangsannotation über das Street View-Bild zu 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 an geocoding-feedback-channel@google.com.