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

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 của mình. Trang này giải thích sự khác biệt giữa các bài đánh giá địa điểm được sử 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 một 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á về đị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 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.
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 bài đánh giá về Địa điểm trong PlacesService cũ và lớp Place mới hơn.

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ả bài đá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,
});