住宅社區檢視器

在本例中,我們為地址加入 Place Autocomplete 搜尋列,方便使用者輸入地址並評估附近設施。對於住宅社區的使用者,我們會將 placeTypePreferences 設為通常與居家生活相關聯的類型。本例中的地址僅限於美國。

瞭解程式碼

調整地點類型的顯示頻率

指定當地特色資料庫要傳回的地點類型時,您可以使用 weight 屬性指派每個屬性的相對權重 (相對權重較高的類型會較常顯示)。本例是指定公園和學校 (如有) 的顯示頻率較高。

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

如要使用 Place Autocomplete 服務,您必須先載入 Maps JavaScript API Places Library。Autocomplete 說明文件會詳述自訂 Place Autocomplete 行為時可用的所有參數,例如按地理位置或地點類型篩選預測結果。

  1. 在專案中啟用 Places API
  2. 除了當地特色資料庫外,請一併載入 JavaScript API Places Library。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. 請參閱 Autocomplete 說明文件程式碼範例,瞭解如何在網站或地圖中加入 Place Autocomplete 搜尋列。本例中的相關程式碼內容如下:

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

試用範例