Các phương thức của Geocoding API v4 có hạn mức mặc định là 25 truy vấn mỗi giây (QPS). Để biết thông tin về cách yêu cầu hạn mức cao hơn, hãy xem bài viết Xem và quản lý hạn mức rồi chọn Geocoding API làm dịch vụ.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Hiển thị hình ảnh và chú thích

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Đ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ả điểm đi theo chỉ dẫn 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 Street View Static API, cho phép bạn hiển thị hình ảnh có liên quan cho các 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:

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

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ã 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 (từ -90 đến 90).	`pitch`
`fovDegree`	Trường nhìn ngang (0-120).	`fov`

Yêu cầu hình ảnh

Để yêu cầu hình ảnh trong Chế độ xem đường phố, hãy sử dụng các giá trị từ đối tượng streetViewThumbnail để tạo URL cho API tĩnh của Chế độ xem đường phố.

URL mẫu

Sau đây là ví dụ về một URL được tạo cho Chế độ xem đường phố Static API:

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=API_KEY&signature=YOUR_SIGNATURE

Mã mẫu: TypeScript

Hàm TypeScript sau đây minh hoạ cách tạo URL của API Chế độ xem đường phố tĩnh từ kết quả của điểm cuối Điểm đến.

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 Entrance hoặc NavigationPoint được trả về, thì kết quả cũng có thể bao gồm chú thích hình ảnh của 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 vạch ra lối vào trong hình thu nhỏ.

Các chú thích này dành cho kết xuất phía máy khách. Bạn có thể sử dụng các toạ độ này để vẽ một lớp phủ (ví dụ: sử dụng SVG hoặc <canvas>) lên trên hình ảnh do API tĩnh 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 bên 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ừ API tĩnh bằng cách sử dụng size do widthPx và heightPx chỉ định.

Mã mẫu: Chú thích 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 trong 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:

Chế độ xem đường phố của Google tại New York

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 của bạn tại geocoding-feedback-channel@google.com.