Szczegóły miejsca (nowość)

Wybierz platformę: Android iOS JavaScript Usługa internetowa
Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Pobieranie pól

Jeśli masz już identyfikator obiektu lub miejsca Place, użyj metody Place.fetchFields(), aby uzyskać szczegółowe informacje o tym miejscu. Podaj listę pól danych o miejscu rozdzielonych przecinkami, które mają zostać zwrócone. Nazwy pól podaj w formacie camel case. Użyj zwróconego obiektu Place, aby uzyskać dane dla żądanych pól.

W tym przykładzie używamy identyfikatora miejsca do utworzenia nowego obiektu Place, wywołujemy funkcję Place.fetchFields(), aby wysłać żądanie dotyczące pól displayName i formattedAddress, dodajemy do mapy marker i rejestrujemy w konsoli niektóre dane.

TypeScript

async function getPlaceDetails() {
    const { Place } =  await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    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() {
    const { Place } = await google.maps.importLibrary("places");
    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
Pamiętaj, że zmienne Map i Place zostały zadeklarowane przed tą funkcją: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 Zobacz pełny przykład

Korzystanie z komponentu Przegląd miejsca

Komponent Przegląd miejsca wyświetla szczegółowe informacje o milionach firm, w tym godziny otwarcia, oceny w postaci gwiazdek i zdjęcia, a także wskazówki dojazdu i inne działania w gotowym interfejsie użytkownika w 5 rozmiarach i formatach. Jest to część rozszerzonej biblioteki komponentów Google Maps Platform, czyli zestawu komponentów internetowych, które pomagają programistom szybciej tworzyć lepsze mapy i funkcje lokalizacji.

Użyj konfiguratora przeglądu miejsca, aby utworzyć kod do umieszczenia niestandardowego komponentu przeglądu miejsca, a następnie wyeksportuj go do użycia z popularnymi platformami, takimi jak React i Angular, lub bez żadnej platformy.