Di chuyển sang tính năng Ảnh địa điểm mới

Thành phần Ảnh địa điểm cho phép bạn thêm nội dung ảnh chất lượng cao vào trang web của mình. Trang này giải thích sự khác biệt giữa các tính năng ảnh địa điểm trong lớp Place (mới) và PlacesService (cũ), đồng thời cung cấp một số đoạn mã để so sánh.

  • PlacesService (cũ) trả về một mảng gồm tối đa 10 đối tượng PlacePhoto trong đối tượng PlaceResult cho mọi yêu cầu getDetails() nếu trường photos được chỉ định trong yêu cầu. Trong trường hợp textSearch() và nearbySearch(), ảnh của vị trí đầu tiên sẽ được trả về theo mặc định nếu có.
  • Lớp Place trả về một mảng gồm tối đa 10 đối tượng Photo trong một yêu cầu fetchFields() nếu trường photos được chỉ định trong yêu cầu.

Bảng sau đây liệt kê một số điểm khác biệt chính trong việc sử dụng ảnh địa điểm giữa lớp Place và PlacesService:

PlacesService (Cũ) Place (Mới)
Giao diện PlacePhoto Lớp Photo
PlacePhoto trả về html_attributions dưới dạng chuỗi. Photo trả về một thực thể AuthorAttribution.
Các phương thức yêu cầu sử dụng lệnh gọi lại để xử lý đối tượng kết quả và phản hồi google.maps.places.PlacesServiceStatus. Sử dụng Lời hứa và hoạt động không đồng bộ.
Các phương thức yêu cầu phải kiểm tra PlacesServiceStatus. Không cần kiểm tra trạng thái, có thể sử dụng tính năng xử lý lỗi chuẩn.
Bạn phải tạo bản sao PlacesService bằng cách sử dụng bản đồ hoặc phần tử div. Bạn có thể tạo bản sao Place bất cứ khi nào cần thiết mà không cần tham chiếu đến bản đồ hoặc phần tử trang.

So sánh mã

Phần này so sánh mã cho ảnh địa điểm để minh hoạ sự khác biệt giữa dịch vụ Địa điểm và lớp Địa điểm. Các đoạn mã cho thấy mã cần thiết để yêu cầu ảnh địa điểm trên từng API tương ứng.

Dịch vụ Địa điểm (cũ)

Đoạn mã sau đây cho thấy việc trả về ảnh bằng PlacesService và hiển thị kết quả ảnh đầu tiên trên trang. Trong ví dụ này, yêu cầu thông tin chi tiết về địa điểm chỉ định một mã địa điểm, cùng với các trường name và photos. Sau khi kiểm tra trạng thái dịch vụ, ảnh đầu tiên sẽ xuất hiện trên trang. Khi tạo bản sao PlacesService, bạn phải chỉ định một bản đồ hoặc phần tử div; vì ví dụ này không có bản đồ, nên chúng ta sẽ sử dụng phần tử div.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Thông tin ghi công tác giả trong PlacesService

PlacesService trả về các thuộc tính tác giả bắt buộc dưới dạng một chuỗi html_attributions chứa URL trỏ đến trang hồ sơ của tác giả trên Google. Đoạn mã sau đây cho thấy việc truy xuất dữ liệu phân bổ cho kết quả ảnh đầu tiên.

let attributionUrl = place.photos[0].html_attributions;

Tìm hiểu thêm

Lớp địa điểm (mới)

Đoạn mã sau đây cho thấy cách sử dụng phương thức fetchFields() để trả về thông tin chi tiết về địa điểm, bao gồm cả tên hiển thị và ảnh địa điểm. Trước tiên, một đối tượng Place mới được tạo bản sao bằng mã địa điểm, theo sau là lệnh gọi đến fetchFields(), trong đó các trường displayName và photos được chỉ định. Sau đó, ảnh của vị trí đầu tiên sẽ xuất hiện trên trang. Bạn không cần kiểm tra trạng thái dịch vụ khi sử dụng lớp Place, vì việc này được xử lý tự động.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Thông tin ghi công tác giả trong lớp Place

Lớp Place trả về thông tin ghi công tác giả dưới dạng một thực thể AuthorAttribution bao gồm tên tác giả, URI cho trang hồ sơ của tác giả trên Google và URI cho ảnh hồ sơ của tác giả. Đoạn mã sau đây cho thấy cách truy xuất dữ liệu phân bổ cho kết quả ảnh đầu tiên.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Tìm hiểu thêm