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