此页面由 Cloud Translation API 翻译。

地点评价

欧洲经济区 (EEA) 开发者

借助地点评价，您可以访问 Google 地图数据库中数百万条高质量评价和评分，并将其显示在您的网页上。

查看完整的示例源代码

此示例会检索地点详情（包括第一条地点评价），并在信息窗口中显示相关信息。

TypeScript

let map: google.maps.Map;
let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA
let infoWindow;
let contentString;

async function initMap() {
    const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
    const { Place, Review } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;

    map = new Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    // Use a place ID to create a new Place instance.
    const place = new 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;<

        // F><o>rmat the review usin<g ><HTML>.
        con<tentString =`
  >          div id="ti<tle&>quot;b${place<.displayName}/b/div
            div i>d="address"<${>place.formatt<edAddress}/div
>            a href="${au<thor>Uri}" ta<rget="_bla><n>k"Author: ${auth<or><Name>}/a
            div id="rating"Rating: ${reviewRating} stars/div
            div id="rating"pReview: ${reviewText}/p/div`;
    } else {
        contentString = 'No reviews were found for ' + place.displayName + '.';
    }

    // Create an infowindow to display the review.
    infoWindow = new InfoWindow({
        content: contentString,
        ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
    
    title: place.displayName,
    });

    // Show the info window.
    infoWindow.open({
        anchor: marker,
        map,
    });
}

initMap();index.ts

JavaScript

let map;
let centerCoordinates = { lat: 42.349134, lng: -71.083184 }; // Boston, MA
let infoWindow;
let contentString;

async function initMap() {
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { Place, Review } = await google.maps.importLibrary("places");

  map = new Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });

  // Use a place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  });

  // Call fetchFields, passing 'reviews' and other needed fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location", &qu&&ot;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].authorAttri><b>ution.uri;

    // F<or><mat >the review us<ing HTML.
    co>ntentString = `
         <   d>iv id="t<itle"b${place.displayName}/b/div>
            div id=&<qu>ot;address&qu<ot;${place.form>attedAddress}/div
           < a h>ref="${a<uthorUri}">< >target="_blank&q<uo><t;Au>thor: ${authorName}/a
            div id="rating"Rating: ${reviewRating} stars/div
            div id="rating"pReview: ${reviewText}/p/div`;
  } else {
    contentString = "No reviews were found for " + place.displayName + ".";
  }

  // Create an infowindow to display the review.
  infoWindow = new InfoWindow({
    content: contentString,
    ariaLabel: place.displayName,
  });

  // Add a marker.
  const marker = new AdvancedMarkerElement({
 
   map,
    position: place.location,
    title: place.displayName,
  });

  // Show the info window.
  infoWindow.open({
    anchor: marker,
    map,
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Place Reviews</title>

    <link rel="stylesheet" type="text/css" >href=<"./style.css" /
    script ><type=&q>uot<;modu>le&<quot>; src<="./ind><ex.j>s"<;/script
  /head
  bod>y
   < div i>d=&>quot;map"/div

    !-- prettier-ignore --
    script(g={var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m>=document,b=window;b=b[c]||(b>[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=h||(h=new Promise(async(f,n)={awa>it (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=h=n(Error(p+>" c&&ould not loa>d."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.hea<d.appen>d(a<)}));>d<[l]?c>onsole.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=r.add(f)u().then(()=d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});/script
  /body
/htmlindex.html

试用示例

JSFiddle.net Google Cloud Shell

获取地点的评价

如需获取地点的评价数据，请在 fetchFields() 请求参数中添加 reviews 字段。生成的地点实例包含一个 Review 对象数组，您可以通过该数组访问所需的评价信息。

以下示例展示了如何发出地点详情请求以获取评价。

// Use a place ID to create a new Place instance.
const place = new 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 displ>ay 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;

  // Fo<rmat the revie><w> using HTML.
  conte<nt><Stri>ng = `
    <      div id=&qu>ot;title"b${place.di<spla>yName}/b/di<v
          div id="address">;${place.formattedAdd<re>ss}/div
   <       a href=&>quot;${authorUri}" targe<t=&q>uot;_blank&<quot;Author: ${><a>uthorName}/a
        <  ><div >id="rating"Rating: ${reviewRating} stars/div
          div id="rating"pReview: ${reviewText}/p/div`;
} else {
  contentString = "No reviews were found for " + place.displayName + ".";
}

// Create
 an infowindow to display the review.
infoWindow = new InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});
index.js

Review 实例包含以下内容：

AuthorAttribution
用户提供的 rating。
publishTime（日期）和 relativePublishTimeDescription（相对于当前时间的评价时间，例如“一个月前”）。
评价 text。
textLanguageCode，表示评价所用语言。

如需获取地点的总体评分，请使用 Place.rating 属性（您必须在 fetchFields() 请求参数中请求 rating 字段）。

作者提供方说明

在显示评价时，您还必须显示评价的作者信息。使用 AuthorAttribution 类返回归因。归因包括作者的姓名 (displayName)、其 Google 地图个人资料的 URI (uri) 和作者照片的 URI (photoURI)。以下代码段展示了如何返回归因的 displayName、uri 和 photoURI。

  let authorName = place.reviews[0].authorAttribution!.displayName;
  let authorUri = place.reviews[0].authorAttribution!.uri;
  let authorPhoto = place.reviews[0].authorAttribution!.photoURI;