查看完整範例原始碼
搜尋地點,即可查看 AI 生成的摘要。建議搜尋:
- 「飯店」:顯示鄰近地區摘要。
- 電動車充電站:電動車充電站設施摘要。
- 任何餐廳或商家,可查看地點和評論摘要。
TypeScript
// Define DOM elements. const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; const placeAutocomplete = document.querySelector( 'gmp-place-autocomplete' ) as google.maps.places.PlaceAutocompleteElement; const summaryPanel = document.getElementById('summary-panel') as HTMLDivElement; const placeName = document.getElementById('place-name') as HTMLElement; const placeAddress = document.getElementById('place-address') as HTMLElement; const tabContainer = document.getElementById('tab-container') as HTMLDivElement; const summaryContent = document.getElementById( 'summary-content' ) as HTMLDivElement; const aiDisclosure = document.getElementById('ai-disclosure') as HTMLDivElement; const flagContentLink = document.getElementById('flag-content-link') as HTMLAnchorElement; let innerMap; let marker: google.maps.marker.AdvancedMarkerElement; async function initMap(): Promise<void> { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('places'), ]); innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Bind autocomplete bounds to map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); // Handle selection of an autocomplete result. // prettier-ignore // @ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); // Fetch all summary fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'generativeSummary', 'neighborhoodSummary', 'reviewSummary', 'evChargeAmenitySummary', ], }); // Update the map viewport and position the marker. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } marker.position = place.location; // Update the panel UI. updateSummaryPanel(place); } ); } function updateSummaryPanel(place: google.maps.places.Place) { // Reset UI summaryPanel.classList.remove('hidden'); tabContainer.innerHTML = ''; // innerHTML is OK here since we're clearing known child elements. summaryContent.textContent = ''; aiDisclosure.textContent = ''; placeName.textContent = place.displayName || ''; placeAddress.textContent = place.formattedAddress || ''; let firstTabActivated = false; /** * Safe Helper: Accepts either a text string or a DOM Node (like a div or DocumentFragment). */ const createTab = ( label: string, content: string | Node, disclosure: string, flagUrl: string ) => { const btn = document.createElement('button'); btn.className = 'tab-button'; btn.textContent = label; btn.onclick = () => { // Do nothing if the tab is already active. if (btn.classList.contains('active')) { return; } // Manage the active class state. document .querySelectorAll('.tab-button') .forEach((b) => b.classList.remove('active')); btn.classList.add('active'); if (typeof content === 'string') { summaryContent.textContent = content; } else { summaryContent.replaceChildren(content.cloneNode(true)); } // Set the disclosure text. aiDisclosure.textContent = disclosure || 'AI-generated content.'; // Add the content flag URI. if (flagUrl) { flagContentLink.href = flagUrl; flagContentLink.textContent = "Report an issue" } }; tabContainer.appendChild(btn); // Auto-select the first available summary. if (!firstTabActivated) { btn.click(); firstTabActivated = true; } }; // --- 1. Generative Summary (Place) --- //@ts-ignore if (place.generativeSummary?.overview) { createTab( 'Overview', //@ts-ignore place.generativeSummary.overview, //@ts-ignore place.generativeSummary.disclosureText, //@ts-ignore place.generativeSummary.flagContentURI ); } // --- 2. Review Summary --- //@ts-ignore if (place.reviewSummary?.text) { createTab( 'Reviews', //@ts-ignore place.reviewSummary.text, //@ts-ignore place.reviewSummary.disclosureText, //@ts-ignore place.reviewSummary.flagContentURI ); } // --- 3. Neighborhood Summary --- //@ts-ignore if (place.neighborhoodSummary?.overview?.content) { createTab( 'Neighborhood', //@ts-ignore place.neighborhoodSummary.overview.content, //@ts-ignore place.neighborhoodSummary.disclosureText, //@ts-ignore place.neighborhoodSummary.flagContentURI ); } // --- 4. EV Amenity Summary (uses content blocks)) --- //@ts-ignore if (place.evChargeAmenitySummary) { //@ts-ignore const evSummary = place.evChargeAmenitySummary; const evContainer = document.createDocumentFragment(); // Helper to build a safe DOM section for EV categories. const createSection = (title: string, text: string) => { const wrapper = document.createElement('div'); wrapper.style.marginBottom = '15px'; // Or use a CSS class const titleEl = document.createElement('strong'); titleEl.textContent = title; const textEl = document.createElement('div'); textEl.textContent = text; wrapper.appendChild(titleEl); wrapper.appendChild(textEl); return wrapper; }; // Check and append each potential section if (evSummary.overview?.content) { evContainer.appendChild( createSection('Overview', evSummary.overview.content) ); } if (evSummary.coffee?.content) { evContainer.appendChild( createSection('Coffee', evSummary.coffee.content) ); } if (evSummary.restaurant?.content) { evContainer.appendChild( createSection('Food', evSummary.restaurant.content) ); } if (evSummary.store?.content) { evContainer.appendChild( createSection('Shopping', evSummary.store.content) ); } // Only add the tab if the container has children if (evContainer.hasChildNodes()) { createTab( 'EV Amenities', evContainer, // Passing a Node instead of string evSummary.disclosureText, evSummary.flagContentURI ); } } // Safely handle the empty state. if (!firstTabActivated) { const msg = document.createElement('em'); msg.textContent = 'No AI summaries are available for this specific location.'; summaryContent.replaceChildren(msg); aiDisclosure.textContent = ''; } } initMap();
JavaScript
// Define DOM elements. const mapElement = document.querySelector('gmp-map'); const placeAutocomplete = document.querySelector('gmp-place-autocomplete'); const summaryPanel = document.getElementById('summary-panel'); const placeName = document.getElementById('place-name'); const placeAddress = document.getElementById('place-address'); const tabContainer = document.getElementById('tab-container'); const summaryContent = document.getElementById('summary-content'); const aiDisclosure = document.getElementById('ai-disclosure'); const flagContentLink = document.getElementById('flag-content-link'); let innerMap; let marker; async function initMap() { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('places'), ]); innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, streetViewControl: false, fullscreenControl: false, }); // Bind autocomplete bounds to map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); // Handle selection of an autocomplete result. // prettier-ignore // @ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); // Fetch all summary fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'generativeSummary', 'neighborhoodSummary', 'reviewSummary', 'evChargeAmenitySummary', ], }); // Update the map viewport and position the marker. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } marker.position = place.location; // Update the panel UI. updateSummaryPanel(place); }); } function updateSummaryPanel(place) { // Reset UI summaryPanel.classList.remove('hidden'); tabContainer.innerHTML = ''; // innerHTML is OK here since we're clearing known child elements. summaryContent.textContent = ''; aiDisclosure.textContent = ''; placeName.textContent = place.displayName || ''; placeAddress.textContent = place.formattedAddress || ''; let firstTabActivated = false; /** * Safe Helper: Accepts either a text string or a DOM Node (like a div or DocumentFragment). */ const createTab = (label, content, disclosure, flagUrl) => { const btn = document.createElement('button'); btn.className = 'tab-button'; btn.textContent = label; btn.onclick = () => { // Do nothing if the tab is already active. if (btn.classList.contains('active')) { return; } // Manage the active class state. document .querySelectorAll('.tab-button') .forEach((b) => b.classList.remove('active')); btn.classList.add('active'); if (typeof content === 'string') { summaryContent.textContent = content; } else { summaryContent.replaceChildren(content.cloneNode(true)); } // Set the disclosure text. aiDisclosure.textContent = disclosure || 'AI-generated content.'; // Add the content flag URI. if (flagUrl) { flagContentLink.href = flagUrl; flagContentLink.textContent = "Report an issue"; } }; tabContainer.appendChild(btn); // Auto-select the first available summary. if (!firstTabActivated) { btn.click(); firstTabActivated = true; } }; // --- 1. Generative Summary (Place) --- //@ts-ignore if (place.generativeSummary?.overview) { createTab('Overview', //@ts-ignore place.generativeSummary.overview, //@ts-ignore place.generativeSummary.disclosureText, //@ts-ignore place.generativeSummary.flagContentURI); } // --- 2. Review Summary --- //@ts-ignore if (place.reviewSummary?.text) { createTab('Reviews', //@ts-ignore place.reviewSummary.text, //@ts-ignore place.reviewSummary.disclosureText, //@ts-ignore place.reviewSummary.flagContentURI); } // --- 3. Neighborhood Summary --- //@ts-ignore if (place.neighborhoodSummary?.overview?.content) { createTab('Neighborhood', //@ts-ignore place.neighborhoodSummary.overview.content, //@ts-ignore place.neighborhoodSummary.disclosureText, //@ts-ignore place.neighborhoodSummary.flagContentURI); } // --- 4. EV Amenity Summary (uses content blocks)) --- //@ts-ignore if (place.evChargeAmenitySummary) { //@ts-ignore const evSummary = place.evChargeAmenitySummary; const evContainer = document.createDocumentFragment(); // Helper to build a safe DOM section for EV categories. const createSection = (title, text) => { const wrapper = document.createElement('div'); wrapper.style.marginBottom = '15px'; // Or use a CSS class const titleEl = document.createElement('strong'); titleEl.textContent = title; const textEl = document.createElement('div'); textEl.textContent = text; wrapper.appendChild(titleEl); wrapper.appendChild(textEl); return wrapper; }; // Check and append each potential section if (evSummary.overview?.content) { evContainer.appendChild(createSection('Overview', evSummary.overview.content)); } if (evSummary.coffee?.content) { evContainer.appendChild(createSection('Coffee', evSummary.coffee.content)); } if (evSummary.restaurant?.content) { evContainer.appendChild(createSection('Food', evSummary.restaurant.content)); } if (evSummary.store?.content) { evContainer.appendChild(createSection('Shopping', evSummary.store.content)); } // Only add the tab if the container has children if (evContainer.hasChildNodes()) { createTab('EV Amenities', evContainer, // Passing a Node instead of string evSummary.disclosureText, evSummary.flagContentURI); } } // Safely handle the empty state. if (!firstTabActivated) { const msg = document.createElement('em'); msg.textContent = 'No AI summaries are available for this specific location.'; summaryContent.replaceChildren(msg); aiDisclosure.textContent = ''; } } initMap();
CSS
/* Reuse existing map height */ gmp-map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } /* Existing Autocomplete Card Style */ .place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 15px; font-family: Roboto, sans-serif; font-size: 1rem; } gmp-place-autocomplete { width: 300px; } /* New: Summary Panel Styles */ .summary-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 0; /* Padding handled by children */ font-family: Roboto, sans-serif; width: 350px; max-height: 80vh; /* Prevent overflow on small screens */ overflow-y: auto; display: flex; flex-direction: column; } .hidden { display: none; } #place-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; } #place-header h2 { margin: 0 0 5px 0; font-size: 1.2rem; } #place-address { margin: 0; color: #555; font-size: 0.9rem; } /* Tab Navigation */ .tab-container { display: flex; border-bottom: 1px solid #ddd; background-color: #fff; } .tab-button { flex: 1; background: none; border: none; padding: 10px; cursor: pointer; font-weight: 500; color: #555; border-bottom: 3px solid transparent; } .tab-button:hover { background-color: #f1f1f1; } .tab-button.active { font-weight: bold; border-bottom: 3px solid #000000; } .tab-button.active:hover { background-color: #ffffff; cursor: default; } /* Content Area */ .content-area { padding: 15px; line-height: 1.5; font-size: 0.95rem; color: #333; } .disclosure-footer { font-size: 0.75rem; color: #666; padding: 10px 15px; border-top: 1px solid #eee; font-style: italic; } .flag-content-link { font-size: 0.75rem; color: #666; padding: 10px 15px; border-top: 1px solid #eee; } /* Reuse existing map height */ gmp-map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } /* Existing Autocomplete Card Style */ .place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 15px; font-family: Roboto, sans-serif; font-size: 1rem; } gmp-place-autocomplete { width: 300px; } /* New: Summary Panel Styles */ .summary-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 0; /* Padding handled by children */ font-family: Roboto, sans-serif; width: 350px; max-height: 80vh; /* Prevent overflow on small screens */ overflow-y: auto; display: flex; flex-direction: column; } .hidden { display: none; } #place-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; } #place-header h2 { margin: 0 0 5px 0; font-size: 1.2rem; } #place-address { margin: 0; color: #555; font-size: 0.9rem; } /* Tab Navigation */ .tab-container { display: flex; border-bottom: 1px solid #ddd; background-color: #fff; } .tab-button { flex: 1; background: none; border: none; padding: 10px; cursor: pointer; font-weight: 500; color: #555; border-bottom: 3px solid transparent; } .tab-button:hover { background-color: #f1f1f1; } .tab-button.active { font-weight: bold; border-bottom: 3px solid #000000; } .tab-button.active:hover { background-color: #ffffff; cursor: default; } /* Content Area */ .content-area { padding: 15px; line-height: 1.5; font-size: 0.95rem; color: #333; } .disclosure-footer { font-size: 0.75rem; color: #666; padding: 10px 15px; border-top: 1px solid #eee; font-style: italic; } .flag-content-link { font-size: 0.75rem; color: #666; padding: 10px 15px; }
HTML
<html>
<head>
<title>AI Place Summaries</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map center="37.805, -122.425" zoom="14" map-id="DEMO_MAP_ID">
<!-- Search Input Card -->
<div
class="place-autocomplete-card"
slot="control-inline-start-block-start">
<p>Search for a place with AI summaries:</p>
<gmp-place-autocomplete></gmp-place-autocomplete>
</div>
<!-- Summary text panel (initially hidden) -->
<div
id="summary-panel"
class="summary-card hidden"
slot="control-inline-end-block-start">
<div id="place-header">
<h2 id="place-name"></h2>
<p id="place-address"></p>
</div>
<!-- Tabs for toggling summary types -->
<div class="tab-container" id="tab-container"></div>
<!-- Content display area -->
<div id="summary-content" class="content-area"></div>
<!-- Legal/AI Disclosure -->
<div id="ai-disclosure" class="disclosure-footer"></div>
<!-- Flag content link -->
<a id="flag-content-link" class="flag-content-link"></a>
</div>
</gmp-map>
</body>
</html>試用範例
AI 摘要是地點或區域的概覽,可提供特定地點、地點周邊區域和地點相關評論的實用深入分析。AI 摘要分為三種:
-
地點摘要:針對特定地點 ID 提供的簡短摘要,最多 100 個字元,彙整多種資料類型,提供地點的概略資訊。
-
評論摘要:系統會根據使用者評論生成地點摘要。
-
區域摘要:系統會生成地點周圍區域的摘要,提供額外背景資訊,包括附近的景點。區域摘要可分為兩種:
-
鄰近區域摘要:鄰近搜尋點的高層級總覽,適用於類型為
premise、street_address的地點,以及「房屋」和「住宿」類別中的所有類型。 -
電動車充電站設施摘要:簡要介紹類型為
electric_vehicle_charging_station的地點附近景點。
-
取得 AI 生成摘要
如要擷取及顯示 AI 生成摘要,請按照下列步驟操作:
-
const { Place } = await google.maps.importLibrary("places");
取得
Place執行個體。下列程式碼片段顯示如何從地點 ID 建立Place執行個體:const place = new Place("ChIJaYaXFTqq3oARNy537Kb_W_c");
在對
place.fetchFields()的呼叫中,指定要使用的摘要類型欄位。下列程式碼片段會要求所有摘要欄位:await place.fetchFields({ fields: [ 'generativeSummary', 'neighborhoodSummary', 'reviewSummary', 'evChargeAmenitySummary' // Include other fields as needed. ] });
如要擷取摘要資料,請分別存取
generativeSummary、neighborhoodSummary、reviewSummary和evChargeAmenitySummary屬性。下列程式碼片段顯示如何從generativeSummary擷取總覽。const summaryText = place.generativeSummary.overview;
由於並非所有地點都有 AI 摘要,請務必先確認是否有必要資料,再向使用者顯示。下列程式碼片段使用 if 陳述式檢查 generativeSummary:
if (place.generativeSummary) { overviewText = place.generativeSummary.overview; } else { overviewText = 'No summary is available.'; }
或者,您也可以使用 nullish 運算子簡潔地檢查摘要是否存在:
const overviewText = place.generativeSummary.overview ?? 'No summary is available.';
顯示必要的出處資訊
應用程式中顯示的所有 AI 生成摘要,都必須按照 Google 政策和標準附上適當的出處資訊。詳情請參閱 Maps JavaScript API 的政策和出處資訊。
地點摘要
地點摘要是針對特定地點 ID 提供的簡短概覽,最多 100 個字元,可讓使用者快速瞭解地點概況。地點摘要可能會顯示地點提供的熱門餐點、服務或商品:
-
「Forum Shops 餐廳,在輕鬆的空間中供應大份量的傳統義式料理。」
-
「時尚沙龍,提供剪髮、染髮和吹整服務。」
-
「大型商店,許多供應商提供各式復古裝飾、家具和服飾。」
地點摘要適用於「支援的類型」中顯示的地點類型, 包括「文化」、「娛樂和休閒」、「餐飲」、「購物」、「服務」和「運動」類別。
下列語言和地區的景點支援地點摘要:
| 語言 | 區域 |
|---|---|
| 英文 |
印度 美國 |
要求地點摘要
如要要求生成式地點摘要,請在呼叫 fetchFields() 時加入 generativeSummary 欄位:
await place.fetchFields({ fields: [ 'generativeSummary', // Include other fields as needed. ], });
使用 generativeSummary 屬性擷取地點摘要。下列程式碼片段會從 generativeSummary 擷取總覽和揭露事項文字:
if (place.generativeSummary) { console.log("Place Overview:", place.generativeSummary.overview); console.log("Disclosure:", place.generativeSummary.disclosureText); }
評論摘要
評論摘要是根據使用者評論生成的摘要。評論摘要會整合使用者評論的關鍵要素,例如地點屬性和評論者情緒,提供高層次的洞察資料,協助使用者做出明智的決定。
舉例來說,舊金山渡輪大廈的評論摘要包含各種資訊,從美食和購物到景色和氛圍都有:
"遊客表示,這個歷史地標提供多樣化的商店、餐廳和農夫市集,許多人也讚賞海灣和城市景觀。他們也強調這裡充滿活力、可搭乘渡輪前往其他目的地,以及享受當地商家服務的機會。」
下列語言和地區的興趣點支援評論摘要:
| 語言 | 區域 |
|---|---|
| 英文 | 阿根廷、玻利維亞、巴西、智利、哥倫比亞、哥斯大黎加、多明尼加共和國、厄瓜多、瓜地馬拉、印度、日本、墨西哥、巴拉圭、秘魯、英國、美國、烏拉圭、委內瑞拉 |
| 日文 | 日本 |
| 葡萄牙文 | 巴西 |
| 西班牙文 | 阿根廷、玻利維亞、智利、哥倫比亞、哥斯大黎加、多明尼加共和國、 厄瓜多、瓜地馬拉、墨西哥、巴拉圭、秘魯、美國、烏拉圭、 委內瑞拉 |
要求提供評論摘要
如要要求提供評論摘要,請在呼叫 fetchFields() 時加入 reviewSummary 欄位:
await place.fetchFields({ fields: [ 'reviewSummary', // Include other fields as needed. ], });
使用 reviewSummary 屬性擷取評論摘要。如要擷取評論摘要,請存取 reviewSummary.text 屬性。下列程式碼片段會從 reviewSummary 擷取文字。
if (place.reviewSummary) { console.log("Place Review Summary:", place.reviewSummary.text); }
區域摘要
系統會為地點周圍的區域生成摘要。區域摘要 提供地點的額外背景資訊,包括附近的景點,讓使用者在規劃目的地與行程時,做出更明智的決定。 舉例來說,當你造訪新城市時,可以查看飯店的街區摘要,進一步瞭解周邊區域:
-
"舊金山這處充滿活力的區域融合了北灘和中國城,位於金融區西北方,擁有文學地標、獨特的文化景點和多元的餐飲選擇。值得一遊的地點包括標誌性的 City Lights 書店、有趣的纜車博物館,以及熱鬧的唐人街。」
如果你考慮為電動車充電,可以查看電動車充電站的生成摘要,進一步瞭解周邊區域:
-
「這個區域提供多種餐飲選擇,步行 9 分鐘即可抵達,包括星巴克、Sushi Jin 和 Safeway。」
除了區域說明,回覆內容也包含說明中提及地點的 Place 執行個體清單;對這些 Place 執行個體呼叫 fetchFields(),即可要求各個地點的詳細資料。
AI 輔助區域摘要分為兩種類型:
-
鄰近區域摘要:鄰近搜尋點的高層級總覽,適用於類型為
premise、street_address的地點,以及「房屋」和「住宿」類別中的所有類型。 -
電動車充電站設施摘要:簡要說明類型為
electric_vehicle_charging_station的地點附近有哪些景點。
以下語言和地區的搜尋點支援區域摘要:
| 語言 | 區域 |
|---|---|
| 英文 | 美國 |
要求生成鄰里摘要
您可以要求取得類型為 premise、street_address 的地點,以及「房屋」和「住宿」類別中所有類型的地點的社區摘要。如要要求鄰里摘要,請在呼叫 fetchFields() 時加入 neighborhoodSummary 欄位:
await place.fetchFields({ fields: [ 'neighborhoodSummary', // Include other fields as needed. ], });
使用 neighborhoodSummary 屬性擷取社區摘要。如要擷取鄰里摘要,請存取 neighborhoodSummary.content 屬性來取得文字。
下列程式碼片段會擷取 neighborhoodSummary 的內容:
if (place.neighborhoodSummary) { console.log("Place Neighborhood Summary:", place.neighborhoodSummary.overview.content); }
要求提供電動車充電站設施摘要
你可以要求類型為 electric_vehicle_charging_station 的地點提供電動車充電站設施摘要。EVCS 設施摘要提供四種摘要:overview、coffee、restaurant 和 store。因此,資料結構是物件陣列,每個物件都包含摘要。如要要求電動車充電站設施摘要,請在呼叫 fetchFields() 時加入 evChargeAmenitySummary 欄位:
await place.fetchFields({ fields: [ 'evChargeAmenitySummary', // Include other fields as needed. ], });
使用 evChargeAmenitySummary
屬性擷取電動車充電站設施摘要。如要從摘要擷取文字,請存取 evChargeAmenitySummary.overview、evChargeAmenitySummary.coffee、evChargeAmenitySummary.restaurant 和 evChargeAmenitySummary.store 屬性的 content 屬性。
下列程式碼片段會擷取 evChargeAmenitySummary 的內容:
// overview, coffee, restaurant, store. if (place.evChargeAmenitySummary) { console.log("Place EVCS Amenity Summary:", place.evChargeAmenitySummary.overview.content); console.log("Coffee:", place.evChargeAmenitySummary.coffee.content); console.log("Restaurants:", place.evChargeAmenitySummary.restaurant.content); console.log("Stores:", place.evChargeAmenitySummary.store.content); }