遷移至新版地點評論

您可以使用「Place Reviews」功能，在網頁中加入使用者評論和評分。本頁面說明 Place 類別 (新版) 和 PlacesService (舊版) 中使用的地點評論之間的差異，並提供一些程式碼片段供您比較。

  • 如果要求中指定了 reviews 欄位，PlacesService (舊版) 會針對任何 getDetails() 要求，在 PlaceResult 物件中傳回 PlaceReview 例項陣列。
  • 如果要求中指定了 reviews 欄位，Place (新) 會在 fetchFields() 要求中傳回 Review 執行個體的陣列。

下表列出 Place 類別與 PlacesService 之間，使用地點評論時的主要差異：

PlacesService (舊版) Place (新版)
PlaceReview 介面 Review 類別
方法必須使用回呼來處理結果物件和 google.maps.places.PlacesServiceStatus 回應。 使用 Promise，並以非同步方式運作。
方法需要進行 PlacesServiceStatus 檢查。 不需要進行狀態檢查，可以使用標準錯誤處理。
PlacesService 必須使用地圖或 div 元素進行例項化。 Place 可在需要時隨處例項化，不必參照地圖或網頁元素。
PlaceReview 會使用 author_name、author_url 和 profile_photo_url 欄位，傳回評論的歸因資料。 Review 會使用 AuthorAttribution 例項，傳回評論的歸因資料。

程式碼比較

本節將比較文字搜尋方法的程式碼，說明舊版 PlacesService 和新版 Place 類別的差異。

地點服務 (舊版)

以下程式碼片段會呼叫 getDetails()，要求地點詳細資料 (包括評論)，並在資訊視窗中顯示第一則評論結果。

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,
    });
  }
});

地點類別 (新版)

以下程式碼片段會呼叫 fetchFields() 方法，要求地點詳細資料 (包括評論)，並在資訊視窗中顯示第一則評論結果。

// 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,
});