Szczegóły miejsca (nowość)

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

Umieść obiekt

Obiekt Place, który zawiera informacje o miejscu, jest dynamicznie zwracany przez wyszukiwanie tekstowe, wyszukiwanie w pobliżu i autouzupełnianie miejsc. Możesz też utworzyć obiekt Place na podstawie identyfikatora miejsca lub nazwy zasobu (nazwa zasobu to identyfikator miejsca z prefiksem places/). Poniższy fragment kodu pokazuje, jak utworzyć obiekt Place za pomocą identyfikatora miejsca: 

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

Możesz też utworzyć obiekt Place na podstawie nazwy zasobu miejsca: 

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

Więcej informacji znajdziesz w sekcji PlaceOptions.

Pobieranie pól

Jeśli masz istniejący obiekt Place, identyfikator miejsca lub nazwę zasobu, użyj metody Place.fetchFields(), aby uzyskać szczegółowe informacje o tym miejscu. Podaj rozdzielaną przecinkami listę pól danych o miejscach, które mają być zwracane. Nazwy pól podaj w formacie camel case. Użyj zwróconego obiektu Place, aby uzyskać dane w przypadku żądanych pól.

W tym przykładzie używamy identyfikatora miejsca do utworzenia nowego Place, wywołujemy Place.fetchFields(), aby poprosić o pola displayName i formattedAddress, a następnie dodajemy do mapy znacznik.

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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

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

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

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });
    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);
    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }
    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
index.js
Zwróć uwagę, ż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