Điểm cuối SearchDestinations của Geocoding API cung cấp bối cảnh theo từng khu vực cụ thể, bao gồm cả các điểm điều hướng và lối vào. Để nâng cao trải nghiệm người dùng, phản hồi có thể bao gồm các tham số cho API Chế độ xem đường phố tĩnh, cho phép bạn hiển thị hình ảnh có liên quan cho những vị trí này.
Yêu cầu hình ảnh và chú thích
Để nhận thông tin về hình ảnh và chú thích, bạn phải thêm các trường sau vào tiêu đề X-Goog-FieldMask:
destinations.navigationPoints.streetViewThumbnaildestinations.navigationPoints.entranceAnnotationdestinations.entrances.streetViewThumbnaildestinations.entrances.streetViewAnnotation
Ví dụ về yêu cầu 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
Ví dụ về phản hồi 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
}
]
}
}
]
}
]
}
Các trường nổi bật
Các đối tượng Entrance và NavigationPoint trong phản hồi có thể chứa một trường streetViewThumbnail với các trường sau:
| Trường | Mô tả | Tham số API tĩnh |
|---|---|---|
pano |
Một mã nhận dạng ảnh toàn cảnh cụ thể. | pano |
widthPx |
Chiều rộng đề xuất cho hình ảnh. | size (phần chiều rộng) |
heightPx |
Chiều cao đề xuất cho hình ảnh. | size (phần chiều cao) |
headingDegree
|
Hướng la bàn của camera (0 – 360). | heading
|
pitchDegree
|
Góc lên/xuống của camera (-90 đến 90). | pitch
|
fovDegree |
Trường nhìn ngang (0-120). | fov |
Yêu cầu hình ảnh
Để yêu cầu một hình ảnh Chế độ xem đường phố, hãy sử dụng các giá trị từ đối tượng streetViewThumbnail để tạo một URL cho Street View Static API.
URL mẫu
Sau đây là ví dụ về một URL được tạo bằng 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
Mã mẫu: TypeScript
Hàm TypeScript sau đây minh hoạ cách tạo URL API Chế độ xem đường phố tĩnh từ đầu ra của điểm cuối 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()}`;
}
Chú thích hình ảnh
Nếu trả về Entrance hoặc NavigationPoint, thì kết quả cũng có thể bao gồm chú thích hình ảnh về lối vào tương ứng trong trường streetViewAnnotation hoặc entranceAnnotation. Thông tin này cung cấp toạ độ pixel cho một đa giác phác thảo lối vào trong hình thu nhỏ.
Các chú thích này dành cho hoạt động kết xuất phía máy khách. Bạn có thể dùng các lớp này để vẽ một lớp phủ (ví dụ: dùng SVG hoặc <canvas>) lên trên hình ảnh do Static API trả về.
Hệ toạ độ chú thích
Điểm gốc (0,0) là góc trên cùng bên trái của hình ảnh.
xPx: Khoảng cách theo chiều ngang từ cạnh trái.yPx: Khoảng cách theo chiều dọc từ cạnh trên.
Để đảm bảo đa giác căn chỉnh chính xác, bạn phải yêu cầu hình ảnh từ Static API bằng cách sử dụng size do widthPx và heightPx chỉ định.
Mã mẫu: Chú thích bản vẽ (TypeScript và SVG)
Ví dụ này minh hoạ cách sử dụng TypeScript và SVG để phủ đa giác chú thích lối vào lên hình ảnh Chế độ xem đường phố.
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>
Bạn sẽ thấy nội dung tương tự như sau:
Phản hồi
Đây là một tính năng thử nghiệm của Geocoding API. Chúng tôi rất mong nhận được ý kiến phản hồi tại địa chỉ geocoding-feedback-channel@google.com.