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 đánh giá đị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 các trang web. Trang này giải thích sự khác biệt giữa bài đánh giá đị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 PlaceReview thực thể 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)
PlaceReview giao diện Review lớp
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 Lời hứa 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 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.
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 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á đị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á và 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 fetchFields() phương thức để yêu cầu thông tin chi tiết về địa điểm, 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,
});