รีวิวสถานที่ช่วยให้คุณเพิ่มรีวิวและการให้คะแนนของผู้ใช้ลงในหน้าเว็บได้ หน้านี้
อธิบายความแตกต่างระหว่างรีวิวสถานที่ตามที่ใช้ในคลาส Place
(ใหม่) และ PlacesService (เดิม) รวมถึงแสดงข้อมูลโค้ดบางส่วนเพื่อ
เปรียบเทียบ
- PlacesService(เดิม) จะแสดงผลอาร์เรย์ของอินสแตนซ์- PlaceReviewเป็นส่วนหนึ่งของออบเจ็กต์- PlaceResultสำหรับคำขอ- getDetails()หากมีการระบุฟิลด์- reviewsในคำขอ
- Place(ใหม่) แสดงผลอาร์เรย์ของอินสแตนซ์- Reviewเป็นส่วนหนึ่งของคำขอ- fetchFields()หากมีการระบุฟิลด์- reviewsในคำขอ
ตารางต่อไปนี้แสดงความแตกต่างหลักบางประการในการใช้รีวิวสถานที่ระหว่างคลาส 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,
});