הצגת קוד המקור המלא לדוגמה
הדוגמה הזו מאחזרת את פרטי המקום, כולל הביקורת על המקום הראשון, ומציגה את המידע בחלון מידע.
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();
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();
/* * 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> <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>
כדאי לנסות דוגמה
איך מקבלים ביקורות על מקום
כדי לקבל נתוני ביקורות על מקום, צריך לכלול את השדה reviews
בfetchFields()
של הבקשות. מופע ה-Place שמתקבל מכיל מערך של 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 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
מכיל:
AuthorAttribution
- הערך של
rating
שהמשתמש נתן. publishTime
(תאריך) וגםrelativePublishTimeDescription
(ביקורת ביחס לזמן הנוכחי, לדוגמה, 'לפני חודש').- הביקורת
text
. textLanguageCode
מציין את השפה שבה נכתבה הביקורת.
כדי לקבל את הדירוג הכולל של המקום, צריך להשתמש במאפיין Place.rating
(צריך
מבקשים את השדה rating
בפרמטרים של הבקשה fetchFields()
).
פרטי הייחוס של המחברים
כשמציגים ביקורת, צריך להציג גם את פרטי המחבר של הביקורת. משתמשים ב
AuthorAttribution
class כדי להחזיר ייחוסים. הייחוס כולל את שם המחבר
(displayName
), URI לפרופיל שלהם במפות Google (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;