Конечная точка SearchDestinations API геокодирования предоставляет гиперлокальный контекст, включая точки навигации и входы. Для улучшения пользовательского опыта ответ может включать параметры для статического API просмотра улиц , что позволяет отображать релевантные изображения для этих мест.
Запрос изображений и аннотаций
Для получения информации об изображениях и аннотациях необходимо добавить следующие поля в заголовок X-Goog-FieldMask :
-
destinations.navigationPoints.streetViewThumbnail -
destinations.navigationPoints.entranceAnnotation -
destinations.entrances.streetViewThumbnail -
destinations.entrances.streetViewAnnotation
Пример запроса 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 со следующими полями:
| Поле | Описание | Статический параметр API |
|---|---|---|
pano | Конкретный идентификатор панорамы. | pano |
widthPx | Рекомендуемая ширина изображения. | size (ширина) |
heightPx | Рекомендуемая высота для изображения. | size (высота) |
headingDegree | Положение камеры по компасу (0-360). | heading |
pitchDegree | Угол наклона камеры вверх/вниз (от -90 до 90). | pitch |
fovDegree | Горизонтальное поле зрения (0-120). | fov |
Запросить изображение
Для запроса изображения Street View используйте значения из объекта streetViewThumbnail для формирования URL-адреса для статического API Street View .
Пример URL
Ниже приведён пример созданного URL-адреса статического API для просмотра улиц:
https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
Пример кода: TypeScript
Следующая функция TypeScript демонстрирует, как сформировать URL-адрес 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> ) поверх изображения, возвращаемого статическим API.
Система координат аннотации
Начало координат (0,0) находится в верхнем левом углу изображения.
-
xPx: Горизонтальное расстояние от левого края. -
yPx: Вертикальное расстояние от верхнего края.
Для обеспечения правильного выравнивания многоугольника необходимо запросить изображение из статического API, используя size , указанный параметрами widthPx и heightPx .
Пример кода: Отображение аннотаций (TypeScript и SVG)
В этом примере показано, как использовать TypeScript и SVG для наложения полигона аннотации входа на изображение Street View.
Машинопись
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>
Вы должны увидеть что-то подобное:
Обратная связь
Это экспериментальная функция API геокодирования. Будем благодарны за отзывы, отправленные по адресу geocoding-feedback-channel@google.com .