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