遷移至新版地點評論

歐洲經濟區 (EEA) 開發人員

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

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

下表列出 Place 類別和 PlacesService 在使用地點評論方面的一些主要差異：

PlacesService (舊版) Place (新)
PlaceReview 介面 Review 類別
方法需要使用回呼來處理結果物件和 google.maps.places.PlacesServiceStatus 回應。 使用 Promise，並以非同步方式運作。
方法需要進行 PlacesServiceStatus 檢查。 不需要檢查狀態，可使用標準錯誤處理程序。 瞭解詳情。
必須使用地圖或 div 元素例項化 PlacesService。 您可以在需要時例項化 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,
});