Wyświetlanie zdjęć i adnotacji

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

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ć informacje o zdjęciach i adnotacjach, musisz dodać do nagłówka X-Goog-FieldMask te pola:

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

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ęść wysokości)
headingDegree Kierunek kompasu kamery (0–360). heading
pitchDegree Kąt nachylenia kamery w górę lub 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, aby utworzyć adres 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 zwracanym 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-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>

Powinien wyświetlić się komunikat podobny do tego:

Google NYC Street View

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.