Szczegóły miejsc

Wybierz platformę: Android iOS JavaScript Usługa internetowa

Pola pobierania

Jeśli masz już identyfikator obiektu lub miejsca Place, użyj Place.fetchFields aby uzyskać szczegółowe informacje o danym miejscu. Podaj oddzieloną przecinkami listę umieścić pola danych, które mają zostać zwrócone; określ nazwy pól, używając wielkich liter. Użyj zwróconego obiektu Place, aby uzyskać dane dotyczące wymagane pola.

W tym przykładzie identyfikator miejsca służy do utworzenia nowego obiektu Place, wywołuje funkcję Place.fetchFields, prosząc o pola displayName i formattedAddress, dodaje znacznik do mapy i zapisują dane w konsoli.

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 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 Omówienie miejsca

Komponent Omówienie miejsca wyświetla szczegółowe informacje na temat milionów firm, w tym godziny otwarcia, opinie, zdjęcia, wskazówki dojazdu i inne działań w gotowym interfejsie w 5 rozmiarach i formatach. Jest to część rozszerzonej biblioteki komponentów Google Maps Platform, czyli zestawu komponentów internetowych, który pomaga deweloperom szybciej tworzyć lepsze mapy i funkcje związane z lokalizacją.

Użyj konfiguratora Widoku informacji o miejscu, aby utworzyć kod do umieszczenia w witrynie dla niestandardowego komponentu Widok informacji o miejscu, a potem wyeksportuj go do użycia z popularnymi frameworkami, takimi jak React i Angular, lub bez frameworka.