Szczegóły miejsc

Pobierz pola

Jeśli masz już identyfikator obiektu lub miejsca Place, użyj metody Place.fetchFields, by uzyskać szczegółowe informacje o tym miejscu. Podaj oddzieloną przecinkami listę pól danych miejsc do zwrócenia. Nazwy pól podaj wielbłąd. Aby pobrać dane dla żądanych pól, użyj zwróconego obiektu Place.

Poniższy przykład używa identyfikatora miejsca, aby utworzyć nowy obiekt Place, wywołuje metodę Place.fetchFields żądającą pól displayName i formattedAddress, dodaje znacznik do mapy i rejestruje niektóre dane w konsoli.

TypeScript

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

JavaScript

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js

Używanie komponentu Przegląd miejsca

Uwaga: w tym przykładzie korzystamy z biblioteki open source. Otwórz README, aby uzyskać pomoc i opinie dotyczące biblioteki.

Dzięki komponentom sieciowym możesz wyświetlać szczegóły miejsc za pomocą kilku wierszy kodu.

Obraz przedstawiający odmiany komponentu Przegląd miejsca w rozmiarze XS (małym, małym, średnim, dużym i dużym) w zależności od pola rozmiaru wpisanego przez użytkownika.
Rysunek 1. Informacje o miejscu z 5 różnymi wersjami rozmiaru

Co to są komponenty internetowe?

Komponenty internetowe umożliwiają tworzenie niestandardowych, zamkniętych tagów HTML wielokrotnego użytku, które można wykorzystać w dowolnym miejscu w kodzie HTML Twojej aplikacji internetowej. Działają one we wszystkich nowoczesnych przeglądarkach i udostępniają niezależny od platformy mechanizm, który pozwala lepiej wykorzystywać interfejs i funkcje aplikacji.

Co to jest komponent Przegląd miejsca?

Komponent Przegląd miejsc wyświetla szczegółowe informacje o milionach firm, m.in. godziny otwarcia, opinie w postaci gwiazdek i zdjęcia, a także wskazówki dojazdu i inne działania w 5 rozmiarach i formatach.

Co to jest Rozszerzona biblioteka komponentów?

Rozszerzona biblioteka komponentów z Google Maps Platform to zestaw komponentów internetowych, który pomaga programistom szybciej i łatwiej tworzyć lepsze mapy i funkcje lokalizacji. Obejmuje on kod stały, sprawdzone metody i elastyczne projektowanie, dzięki czemu złożone interfejsy map są zredukowane do jednego elementu HTML. Dzięki tym komponentom łatwiej jest odczytywać, poznawać, dostosowywać i obsługiwać mapy oraz kod związany z lokalizacją.

Rozpocznij

Zacznij od wczytania biblioteki komponentów rozszerzonych przy użyciu npm.

Aby uzyskać najlepszą wydajność, użyj menedżera pakietów i zaimportuj tylko potrzebne komponenty. Ten pakiet jest wymieniony w npm jako @googlemaps/extended-component-library. Zainstaluj za pomocą:

  npm i @googlemaps/extended-component-library;

Następnie zaimportuj wszystkie komponenty, których używasz w aplikacji.

  import '@googlemaps/extended-component-library/place_overview.js';

Po wczytaniu biblioteki npm pobierz klucz interfejsu API z konsoli Cloud.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

Użyj tagu komponentu Przegląd miejsca z wybranym identyfikatorem miejsca. To jest miejsce zamiast biura Google w Auckland.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

Komponent Przegląd miejsca jest dostępny w pięciu rozmiarach. Komponent domyślny używa odmiany rozmiaru x-large. Aby uzyskać inne wersje rozmiaru, dodaj lub zmodyfikuj atrybut size.

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

Więcej informacji znajdziesz w GitHubie lub npm. Komponenty używane w przykładowym kodzie znajdziesz na stronie przykłady w GitHubie.