如何为新版PlacesAutocompleteElement添加占位文本？

旧版Google Places Autocomplete API直接使用<input>标签，只需添加placeholder="Search"就能设置占位文本。但新版要求通过JavaScript创建<gmp-place-autocomplete>元素并插入到HTML div中，常规方法无法设置占位文本。

文档给出的示例代码：

const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
const ACDiv = document.getElementById("search-field")
ACDiv.appendChild(placeAutocomplete);
placeAutocomplete.id = "place-autocomplete-input";

已尝试过的无效方法：

• placeAutocomplete.placeholder = "Search"
• placeAutocomplete.createPlaceholder("Search")
• document.getElementById("place-autocomplete-input").placeholder = "Search"

可行的解决方式 #

1. 实例化时传入配置参数

在创建PlaceAutocompleteElement实例时，直接在构造函数的配置对象中指定占位文本：

const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
  placeholder: "Search"
});
const ACDiv = document.getElementById("search-field")
ACDiv.appendChild(placeAutocomplete);
placeAutocomplete.id = "place-autocomplete-input";

2. 用setAttribute动态设置

如果已经创建了元素实例，可通过setAttribute方法为自定义元素添加占位文本属性：

const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
const ACDiv = document.getElementById("search-field")
ACDiv.appendChild(placeAutocomplete);
placeAutocomplete.id = "place-autocomplete-input";
// 添加这一行设置占位文本
placeAutocomplete.setAttribute('placeholder', 'Search');

3. 直接在HTML中声明元素并设置属性

也可以跳过JS创建，直接在HTML中定义<gmp-place-autocomplete>并设置占位属性，后续再通过JS获取实例：

<div id="search-field">
  <gmp-place-autocomplete id="place-autocomplete-input" placeholder="Search"></gmp-place-autocomplete>
</div>

说明 #

<gmp-place-autocomplete>是Google提供的自定义Web Component，不属于原生<input>元素，直接赋值placeholder属性不会触发内部逻辑，必须通过构造配置或setAttribute的方式来设置。

内容的提问来源于stack exchange，提问作者MeganM