Xem mã nguồn mẫu hoàn chỉnh
Ví dụ này truy xuất thông tin chi tiết về địa điểm, bao gồm cả bài đánh giá địa điểm đầu tiên và các vị trí hiển thị thông tin trong cửa sổ thông tin.
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;
// 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 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();
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", "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 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();
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;
}
HTML
<html>
<head>
<title>Place Reviews</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="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)=>{await (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+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.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>
</html>
Thử dùng mẫu
Xem bài đánh giá về một địa điểm
Để nhận dữ liệu bài đánh giá cho một địa điểm, hãy bao gồm trường reviews trong fetchFields() của bạn
tham số yêu cầu. Thực thể Địa điểm thu được chứa một mảng các đối tượng Review,
từ đó bạn có thể truy cập
thông tin đánh giá cần thiết.
Ví dụ sau đây minh hoạ việc gửi một yêu cầu về Thông tin chi tiết về địa điểm để yêu cầu đánh giá.
// 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;
// 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 InfoWindow({
content: contentString,
ariaLabel: place.displayName,
});
Review
thực thể chứa nội dung sau:
AuthorAttributionratingdo người dùng cung cấp.publishTime(Ngày) vàrelativePublishTimeDescription(xem lại so với thời gian hiện tại, ví dụ: "một tháng trước").- Bài đánh giá
text. textLanguageCodecho biết ngôn ngữ của bài đánh giá.
Để nhận điểm xếp hạng chung cho địa điểm, hãy sử dụng thuộc tính Place.rating (bạn phải
yêu cầu trường rating trong tham số yêu cầu fetchFields() của bạn).
Ghi nhận tác giả
Khi hiển thị bài đánh giá, bạn cũng phải hiển thị ghi nhận tác giả cho bài đánh giá đó. Sử dụng
AuthorAttribution
để trả về thuộc tính. Ghi công bao gồm tên tác giả
(displayName), URI cho hồ sơ của họ trên Google Maps (uri) và URI
cho ảnh của tác giả (photoURI). Đoạn mã sau đây cho thấy việc trả về
displayName, uri và photoURI cho một mô hình phân bổ.
let authorName = place.reviews[0].authorAttribution!.displayName; let authorUri = place.reviews[0].authorAttribution!.uri; let authorPhoto = place.reviews[0].authorAttribution!.photoURI;