Di chuyển sang bài đánh giá địa điểm mới

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

Tính năng bài đánh giá về địa điểm cho phép bạn thêm bài đánh giá và điểm xếp hạng của người dùng vào trang web. Trang này giải thích sự khác biệt giữa bài đánh giá địa điểm như được dùng 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 các thực thể PlaceReview trong đối tượng PlaceResult cho mọi yêu cầu getDetails() nếu trường reviews được chỉ định trong yêu cầu.
  • Place (mới) trả về một mảng các thực thể Review trong yêu cầu fetchFields() nếu trường reviews đượ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 bài đánh giá địa điểm giữa lớp Place và PlacesService:

PlacesService (Cũ) Place (Mới)
Giao diện PlaceReview Lớp Review
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.
PlaceReview trả về dữ liệu phân bổ cho bài đánh giá bằng cách sử dụng các trường author_name, author_url và profile_photo_url. Review trả về dữ liệu phân bổ cho bài đánh giá bằng cách sử dụng một thực thể AuthorAttribution.

So sánh mã

Phần này so sánh mã cho các phương thức tìm kiếm văn bản để minh hoạ sự khác biệt giữa các bài đánh giá Địa điểm trong lớp PlacesService cũ và lớp Place mới.

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

Đoạn mã sau đây gọi getDetails() để yêu cầu thông tin chi tiết về địa điểm, bao gồm cả bài đánh giá, đồng thời hiển thị kết quả đánh giá đầu tiên trong một cửa sổ thông tin.

const request = {
  placeId: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  fields: ["name", "formatted_address", "geometry", "reviews"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].author_name;
      let authorUri = place.reviews[0].author_url;

      // Format the review using HTML.
      contentString =`
            <div id="title"><b>${place.name}</b></div>
            <div id="address">${place.formatted_address}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
      contentString = `No reviews were found for ${place.name}`;
    }

    const infowindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
    });

    // Show the info window.
    infowindow.open({
      anchor: marker,
      map,
    });
  }
});

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

Đoạn mã sau đây gọi phương thức fetchFields() để yêu cầu thông tin chi tiết về địa điểm, bao gồm cả bài đánh giá, đồng thời hiển thị kết quả bài đánh giá đầu tiên trong một cửa sổ thông tin.

// Use a place ID to create a new Place instance.
const place = new google.maps.places.Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});

// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString =`
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = `No reviews were found for ${place.displayName}`;
}

// Create an infowindow to display the review.
infoWindow = new google.maps.InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});

// Add a marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: place.location,
  title: place.displayName,
});

// Show the info window.
infoWindow.open({
  anchor: marker,
  map,
});