หน้านี้ได้รับการแปลโดย Cloud Translation API

รีวิวสถานที่

นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)

รีวิวของสถานที่ช่วยให้คุณเข้าถึงรีวิวและคะแนนคุณภาพสูงหลายล้านรายการจากฐานข้อมูลของ Places และแสดงรีวิวเหล่านั้นในหน้าเว็บได้

ดูซอร์สโค้ดตัวอย่างที่สมบูรณ์

ตัวอย่างนี้จะดึงข้อมูลรายละเอียดสถานที่ รวมถึงรีวิวสถานที่แรก และแสดงข้อมูลในหน้าต่างข้อมูล

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

ดูรีวิวของสถานที่

หากต้องการดูข้อมูลรีวิวของสถานที่ ให้ใส่ช่อง reviews ในพารามิเตอร์คำขอ fetchFields() อินสแตนซ์สถานที่ที่ได้จะมีอาร์เรย์ของออบเจ็กต์ 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 (เวลาตรวจสอบซึ่งสัมพันธ์กับเวลาปัจจุบัน เช่น "1 เดือนที่แล้ว")
รีวิว text
textLanguageCode ที่ระบุภาษาที่ใช้เขียนรีวิว

หากต้องการดูคะแนนโดยรวมของสถานที่ ให้ใช้พร็อพเพอร์ตี้ Place.rating (คุณต้องขอฟิลด์ rating ในพารามิเตอร์คำขอ fetchFields())

การระบุแหล่งที่มาของผู้แต่ง

เมื่อแสดงรีวิว คุณต้องแสดงการระบุแหล่งที่มาของผู้เขียนรีวิวด้วย ใช้คลาส AuthorAttribution เพื่อแสดงการระบุแหล่งที่มา การระบุแหล่งที่มาประกอบด้วยชื่อผู้เขียน (displayName), URI สำหรับโปรไฟล์ Google Maps ของผู้เขียน (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;