地点评价

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();
index.ts

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();
index.js

/*   * 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> <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>
index.html