Показ изображений и аннотаций

Разработчики из Европейской экономической зоны (ЕЭЗ)

Конечная точка SearchDestinations Geocoding API предоставляет гиперлокальный контекст, включая точки навигации и входы. Чтобы улучшить взаимодействие с пользователем, ответ может включать параметры для Street View Static API, что позволяет отображать релевантные изображения для этих местоположений.

Запрос изображений и аннотаций

Чтобы получить информацию об изображениях и аннотациях, необходимо включить в заголовок X-Goog-FieldMask следующие поля:

Пример запроса 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

Пример запроса 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
              }
            ]
          }
        }
      ]
    }
  ]
}

Объекты Entrance и NavigationPoint в ответе могут содержать поле streetViewThumbnail со следующими полями:

Поле Описание Параметр Static API
pano Идентификатор панорамы. pano
widthPx Рекомендуемая ширина изображения. size (ширина)
heightPx Рекомендуемая высота изображения. size (высота)
headingDegree Направление камеры по компасу (0–360). heading
pitchDegree Угол наклона камеры вверх/вниз (от -90 до 90). pitch
fovDegree Горизонтальная зона обзора (0–120). fov

Запросить изображение

Чтобы запросить изображение Просмотра улиц, используйте значения из объекта streetViewThumbnail для создания URL для Street View Static API.

Пример URL

Ниже приведен пример URL 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

Пример кода: TypeScript

В следующей функции TypeScript показано, как создать URL Static Street View API из выходных данных конечной точки 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()}`;
}

Аннотации к изображениям

Если возвращается Entrance или NavigationPoint, он также может включать аннотацию изображения соответствующего входа в поле streetViewAnnotation или entranceAnnotation. Это координаты пикселей многоугольника, который очерчивает вход на уменьшенном изображении.

Эти аннотации предназначены для клиентской отрисовки. Их можно использовать, чтобы нарисовать наложение (например, с помощью SVG или <canvas>) поверх изображения, возвращенного Static API.

Система координат аннотации

Начало координат (0,0) – это левый верхний угол изображения.

  • xPx – расстояние по горизонтали от левого края.
  • yPx – расстояние по вертикали от верхнего края.

Чтобы многоугольник выравнивался правильно, вы должны запросить изображение из Static API, используя size, указанный в widthPx и heightPx.

Образец кода: рисование аннотаций (TypeScript и SVG)

В этом примере показано, как использовать TypeScript и SVG, чтобы наложить многоугольник аннотации входа на изображение Просмотра улиц.

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>

Вы увидите примерно следующее:

Google Просмотр улиц Нью-Йорка

Как оставить отзыв

Это экспериментальная функция Geocoding API. Мы будем рады получить ваши отзывы по адресу geocoding-feedback-channel@google.com.