Place Details

選取平台： Android iOS JavaScript 網頁服務

擷取欄位

如果您已有 Place 物件或地點 ID，請使用 Place.fetchFields() 方法取得該地點的詳細資料。請提供以半形逗號分隔的地點資料欄位清單，並以駝峰式大小寫指定欄位名稱。使用傳回的 Place 物件，即可取得所要求欄位的資料。

下例使用地點 ID 建立新的 Place，並呼叫 Place.fetchFields() 要求 displayName 和 formattedAddress 欄位，在地圖上加入標記，並將部分資料記錄到控制台。

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
請注意，Map 和 Place 是在這個函式之前宣告的：
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 查看完整範例

使用 Place Overview 元件

地點總覽元件會在預先製作的 UI 中，以 5 種大小和格式顯示數百萬家商家的詳細資訊，包括營業時間、星級評論和相片，以及路線和其他動作。這是 Google 地圖平台的擴充元件程式庫的一部分，這組網頁元件可協助開發人員更快速地製作出色的地圖和位置功能。

使用 Place Overview 設定工具為自訂 Place Overview 元件建立可嵌入的程式碼，然後匯出該程式碼，以便與 React 和 Angular 等熱門架構 (或完全不使用架構) 搭配使用。