Opinie o miejscu

Pełny przykładowy kod źródłowy

W tym przykładzie pobierane są szczegóły miejsca, w tym pierwsza opinia o nim, a informacje są wyświetlane w oknie informacyjnym.

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

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

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;
}

style.css

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

Wypróbuj próbkę

Wyświetlanie opinii o miejscu

Aby uzyskać dane opinii o miejscu, dodaj pole reviews do parametrów żądania fetchFields(). Wynikowa instancja Miejsca zawiera tablicę obiektów Review, z których możesz uzyskać dostęp do potrzebnych informacji o opinii.

Na przykładzie poniżej pokazano wysłanie żądania dotyczącego szczegółów miejsca w celu uzyskania opinii. 

// 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,
});

index.js

Instancja Review zawiera:

  • AuthorAttribution
  • rating podany przez użytkownika.
  • publishTime (data) i relativePublishTimeDescription (czas w porównaniu z obecną datą, np. „miesiąc temu”).
  • Opinia text.
  • textLanguageCode wskazujący język, w którym została napisana opinia.

Aby uzyskać ogólną ocenę miejsca, użyj właściwości Place.rating (w parametrach żądania fetchFields() musisz poprosić o pole rating).

Atrybucje autorów

Podczas wyświetlania opinii musisz też wyświetlić informacje o jej autorze. Użyj klasy AuthorAttribution, aby zwrócić atrybucję. Atrybucja zawiera imię i nazwisko autora (displayName), identyfikator URI jego profilu w Mapach Google (uri) oraz identyfikator URI zdjęcia autora (photoURI). Poniższy fragment kodu zwraca wartości displayName, uri i photoURI dla atrybucji. 

  let authorName = place.reviews[0].authorAttribution!.displayName;
  let authorUri = place.reviews[0].authorAttribution!.uri;
  let authorPhoto = place.reviews[0].authorAttribution!.photoURI;