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

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

Place Photos cho phép bạn thêm nội dung ảnh chất lượng cao vào các 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 đầu tiên của địa điểm 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 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 sẽ trả về html_attributions dưới dạng một chuỗi. Photo trả về một thực thể AuthorAttribution.
Các phương thức yêu cầu sử dụng một 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 Promise và hoạt động không đồng bộ.
Các phương thức yêu cầu phải có một chế độ kiểm tra PlacesServiceStatus. Không cần kiểm tra trạng thái, có thể sử dụng quy trình xử lý lỗi tiêu chuẩn. Tìm hiểu thêm.
PlacesService phải được khởi tạo bằng cách sử dụng một bản đồ hoặc một phần tử div. Place có thể được khởi tạo bất cứ khi nào cần, 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 Places Service và lớp Place. Các đoạn mã này cho biết 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 cách 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 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 đó, bức ảnh đầu tiên sẽ xuất hiện trên trang sau khi kiểm tra trạng thái dịch vụ. Khi khởi tạo 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 phần tử div sẽ được dùng.

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 nhận tác giả trong PlacesService

PlacesService trả về thông tin ghi nhận 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 cách 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 thực thể bằng mã địa điểm, sau đó là một lệnh gọi đến fetchFields(), trong đó các trường displayName và photos được chỉ định. Sau đó, bức ảnh ở 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ì trạng thái 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 nhận tác giả trong lớp Place

Lớp Place trả về thông tin ghi nhận tác giả dưới dạng một thực thể AuthorAttribution, bao gồm tên tác giả, một URI cho trang hồ sơ của tác giả trên Google và một URI cho ảnh hồ sơ của tác giả. Đoạn mã sau đây cho biết 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