Metody Geocoding API w wersji 4 mają domyślny limit 25 zapytań na sekundę. Informacje o tym, jak poprosić o zwiększenie limitu, znajdziesz w artykule Wyświetlanie limitów i zarządzanie nimi. Jako usługę wybierz Geocoding API.

Wyświetlanie zdjęć i adnotacji

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Punkt końcowy interfejsu Geocoding API SearchDestinations zapewnia kontekst hiperlokalny, w tym punkty nawigacyjne i wejścia. Aby zwiększyć wygodę użytkowników, odpowiedź może zawierać parametry interfejsu Street View Static API, co umożliwia wyświetlanie odpowiednich zdjęć tych lokalizacji.

Żądanie zdjęć i adnotacji

Aby otrzymywać obrazy i informacje o adnotacjach, musisz dodać te pola do nagłówka X-Goog-FieldMask:

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ęść dotycząca szerokości)
`heightPx`	Sugerowana wysokość obrazu.	`size` (część dotycząca wysokości)
`headingDegree`	Kierunek, w którym zwrócona jest kamera (0–360).	`heading`
`pitchDegree`	Kąt kamery w pionie (od -90 do 90 stopni).	`pitch`
`fovDegree`	Poziome pole widzenia (0–120).	`fov`

Prośba o obraz

Aby poprosić o obraz Street View, użyj wartości z obiektu streetViewThumbnail do utworzenia adresu URL dla statycznego interfejsu Street View API.

Przykładowy URL

Oto przykład skonstruowanego adresu URL interfejsu Street View Static API:

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=YOUR_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 zwracana jest wartość Entrance lub NavigationPoint, może ona również zawierać adnotację do obrazu odpowiedniego wejścia w polu streetViewAnnotation lub entranceAnnotation. Zawiera współrzędne pikseli wielokąta wyznaczającego wejście na miniaturze.

Te adnotacje są przeznaczone do renderowania po stronie klienta. Możesz ich używać do rysowania 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 wielokąt był prawidłowo wyrównany, musisz poprosić o obraz z interfejsu Static API, używając parametru size określonego przez widthPx i heightPx.

Przykładowy kod: adnotacje rysunkowe (TypeScript i SVG)

Ten przykład pokazuje, jak za pomocą języka TypeScript i formatu SVG nałożyć wielokąt adnotacji wejścia na obraz 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 pojawić się ekran podobny do tego:

Prześlij opinię

Jest to eksperymentalna funkcja interfejsu Geocoding API. Będziemy wdzięczni za Twoją opinię. Możesz ją przesłać na adres geocoding-feedback-channel@google.com.