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.

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

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.

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. Jest to część rozszerzonej biblioteki komponentów z Google Maps Platform – zestawu komponentów sieciowych, które pomagają programistom szybciej tworzyć lepsze mapy i funkcje lokalizacji.

Konfigurator przeglądu miejsc

Użyj konfiguratora, aby utworzyć niestandardowy komponent Przegląd miejsc i wygenerować kod, który możesz dodać do strony internetowej.

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.