Punkt końcowy SearchDestinations interfejsu Geocoding API zapewnia kontekst hiperlokalny, w tym punkty nawigacyjne i wejścia. Aby poprawić wrażenia użytkowników, odpowiedź może zawierać parametry interfejsu Street View Static API, co umożliwia wyświetlanie odpowiednich zdjęć dla tych lokalizacji.
Żądanie zdjęć i adnotacji
Aby otrzymywać zdjęcia i informacje o adnotacjach, musisz dodać do nagłówka X-Goog-FieldMask te pola:
destinations.navigationPoints.streetViewThumbnaildestinations.navigationPoints.entranceAnnotationdestinations.entrances.streetViewThumbnaildestinations.entrances.streetViewAnnotation
Przykładowe żądanie 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
Przykładowa odpowiedź 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
}
]
}
}
]
}
]
}
Wyróżnione pola
Obiekty Entrance i NavigationPoint w odpowiedzi mogą zawierać pole streetViewThumbnail z tymi polami:
| Pole | Opis | Parametr statyczny interfejsu API |
|---|---|---|
pano |
Identyfikator konkretnej panoramy. | pano |
widthPx |
Sugerowana szerokość obrazu. | size (część szerokości) |
heightPx |
Sugerowana wysokość obrazu. | size (część dotycząca wysokości) |
headingDegree
|
Kierunek kompasu kamery (0–360). | heading
|
pitchDegree
|
Kąt nachylenia kamery w górę/w dół (od -90 do 90). | pitch
|
fovDegree |
Poziome pole widzenia (0–120). | fov |
Poproś o obraz
Aby poprosić o zdjęcie Street View, użyj wartości z obiektu streetViewThumbnail do utworzenia adresu URL dla Street View Static API.
Przykładowy URL
Oto przykład utworzonego adresu URL interfejsu Street View Static API:
https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=API_KEY&signature=YOUR_SIGNATURE
Przykładowy kod: TypeScript
Poniższa funkcja TypeScript pokazuje, jak utworzyć adres URL interfejsu Static Street View API na podstawie danych wyjściowych punktu końcowego 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()}`;
}
Adnotacje do obrazów
Jeśli zwracany jest obiekt Entrance lub NavigationPoint, może on też zawierać adnotację graficzną odpowiedniego wejścia w polu streetViewAnnotation lub entranceAnnotation. Podaje współrzędne pikseli wielokąta, który wyznacza wejście na miniaturze.
Te adnotacje są przeznaczone do renderowania po stronie klienta. Możesz ich użyć do narysowania nakładki (np. za pomocą SVG lub <canvas>) na obrazie zwróconym przez interfejs Static API.
Układ współrzędnych adnotacji
Punkt początkowy (0,0) to lewy górny róg obrazu.
xPx: odległość w poziomie od lewej krawędzi.yPx: odległość w pionie od górnej krawędzi.
Aby zapewnić prawidłowe wyrównanie wielokąta, musisz poprosić o obraz z interfejsu Static API, używając size określonego przez widthPx i heightPx.
Przykładowy kod: adnotacje rysunkowe (TypeScript i SVG)
Ten przykład pokazuje, jak za pomocą TypeScript i SVG nałożyć wielokąt adnotacji wejścia na zdjęcie 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-bl>ock<;"
!-- The Street View image from the previo>us <step --
img id="street-view-image" src="STREET_VIEW_IMAGE" alt="S>tree<t View" style="display: >blo<ck;"
!-- SVG overlay for annotations --
svg id="annotation-overlay" style=>"<;position: absolute; top: 0; left: 0; pointer-events: none;"
polygon id="entrance-polygon" points=&qu>ot;<&quo>t<; st>yle="fill:rgba(0, 255, 17, 0.3);stroke:rgba(0, 255, 17, 0.9);stroke-width:3" /
/svg
/div
Powinien wyświetlić się komunikat podobny do tego:
Prześlij opinię
To jest eksperymentalna funkcja interfejsu Geocoding API. Będziemy wdzięczni za opinie przesłane na adres geocoding-feedback-channel@google.com.