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)

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 bài đánh giá về địa điểm đượ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 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 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.
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 lớp 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 Place Details, bao gồm cả bài đánh giá, và hiển thị kết quả bài đánh giá đầu tiên trong 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 Place Details, bao gồm cả bài đánh giá, và hiển thị kết quả đá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,
});