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)

Ảnh về đị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 về đị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 về đị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 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 Promise và hoạt động không đồng bộ.
Các phương thức cần có quy trình 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 tạo thực thể bằng cách sử dụng bản đồ hoặc phần tử div. Bạn có thể tạo thực thể Place ở bất cứ nơi 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 về đị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 về đị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 đó, ả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 tạo thực thể cho PlacesService, bạn phải chỉ định một bản đồ hoặc một phần tử div; vì ví dụ này không có bản đồ, nên phần tử div sẽ được sử 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 chuỗi html_attributions chứa URL trỏ đến trang hồ sơ trên Google của tác giả. Đoạn mã sau đây cho thấy cách truy xuất dữ liệu ghi nhận tác giả 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ề Place Details, bao gồm cả tên hiển thị và Place Photos. 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à lệnh gọi đến fetchFields(), trong đó các trường displayName và photos được chỉ định. Sau đó, ảnh đầu tiên về địa điểm 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 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ả, URI cho trang hồ sơ trên Google của tác giả 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 ghi nhận tác giả 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