Szczegóły miejsc

Wybierz platformę: Android iOS JavaScript Usługa internetowa

Pola pobierania

Jeśli masz już identyfikator obiektu lub miejsca Place, użyj metody Place.fetchFields, aby uzyskać szczegółowe informacje o tym miejscu. Podaj oddzieloną przecinkami listę pól danych dotyczących miejsca, które chcesz zwrócić. Określ nazwy pól w przypadku wielbłąda. Użyj zwróconego obiektu Place, aby pobrać dane do żądanych pól.

Poniższy przykład używa identyfikatora miejsca do utworzenia nowego elementu Place, wywołuje Place.fetchFields, żądając pól displayName i formattedAddress, dodaje znacznik do mapy i rejestruje część danych 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

Korzystanie z komponentu Omówienie miejsca

Uwaga: ten przykład korzysta z biblioteki typu open source. W README znajdziesz pomoc i komentarze dotyczące biblioteki.

Komponent Omówienie miejsca wyświetla szczegółowe informacje o milionach firm, m.in. godziny otwarcia, opinie w postaci gwiazdek, zdjęcia, a także wskazówki dojazdu i inne działania w 5 rozmiarach i formatach interfejsu. Jest to część rozszerzonej biblioteki komponentów dostępnej w Google Maps Platform, czyli zestawu komponentów sieciowych, który pomaga programistom szybciej tworzyć lepsze mapy i funkcje lokalizacji.

Konfigurator przeglądu miejsc

Użyj konfiguratora, aby utworzyć kod możliwego do umieszczenia dla niestandardowego komponentu Omówienie miejsca, a następnie wyeksportuj go do wykorzystania z popularnymi platformami, takimi jak React i Angular, lub z całkowitym brakiem platformy.

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 podany w npm jako @googlemaps/extended-component-library. Zainstaluj ją 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 uzyskaj 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 Omówienie miejsca z wybranym identyfikatorem miejsca. To jest obiekt zastępczy dla biura Google w Auckland.

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

Komponent Omówienie miejsca ma pięć odmian rozmiaru. Komponent domyślny używa odmiany rozmiaru x-large. Aby uzyskać inne wersje rozmiaru, dodaj i 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. Aby zobaczyć komponenty użyte w przykładowym kodzie, otwórz stronę z przykładami w GitHubie.