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)

Tính năng ảnh địa điểm cho phép bạn thêm nội dung ảnh chất lượng cao vào các trang web. 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 Place lớp (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 PlacePhoto đối tượng 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 địa điểm đầ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 Photo đối tượng 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)
PlacePhoto giao diện Photo lớp
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à google.maps.places.PlacesServiceStatus phản hồi. Sử dụng Promises và hoạt động không đồng bộ.
Các phương thức yêu cầu 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 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 một bản đồ hoặc một phần tử div. Place có thể được tạo thực thể ở bất cứ đâu cần thiết mà không cần tham chiếu đến một 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 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 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 đó, ảnh đầu tiên sẽ được hiển thị trên trang sau khi kiểm tra trạng thái dịch vụ. Khi tạo thực thể 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 một 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

The 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 một 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 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 fetchFields() phương thức để 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à lệnh gọi đến fetchFields() trong đó các trường displayName và photos được chỉ định. Sau đó, ảnh địa điểm đầu tiên sẽ được hiển thị 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ì thao tá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 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 của tác giả, một URI cho trang Hồ sơ trên Google của tác giả và một 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 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