PlaceAutocompleteElement 类
google.maps.places.PlaceAutocompleteElement
类
PlaceAutocompleteElement 是 HTMLElement
的子类,可为 Places Autocomplete API 提供界面组件。
自定义元素:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>
此类扩展了 HTMLElement
。
此类实现了 PlaceAutocompleteElementOptions
。
通过调用 const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
进行访问。请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) 参数:
|
属性 | |
---|---|
componentRestrictions |
类型:
ComponentRestrictions optional 组件限制。组件限制用于将预测限制为仅在父级组件内进行。例如,国家/地区。 |
locationBias |
类型:
LocationBias optional 搜索地点时使用的软边界或提示。 |
locationRestriction |
类型:
LocationRestriction optional 用于限制搜索结果的边界。 |
name |
类型:
string optional 要用于输入元素的名称。如需了解详情,请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name。与输入的 name 属性具有相同的行为。请注意,这是提交表单时使用的名称。如需了解详情,请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form。
HTML 属性:
|
requestedLanguage |
类型:
string optional 应返回结果的语言(如果可能)的语言标识符。系统可能会将以所选语言显示的结果排名更高,但建议并不局限于此语言。请参阅支持的语言列表。
HTML 属性:
|
requestedRegion |
类型:
string optional 用于结果格式设置和结果过滤的地区代码。这并不会将建议限制在该国家/地区。地区代码接受 ccTLD(“顶级域名”)双字符值。多数 ccTLD 代码都与 ISO 3166-1 代码相同,但也有一些需要注意的例外情况。例如,英国的 ccTLD 为“uk”(
.co.uk ),但其 ISO 3166-1 代码为“gb”(从技术层面来说,适用于“大不列颠及北爱尔兰联合王国”实体)。HTML 属性:
|
types |
类型:
Array<string> optional 要返回的预测类型。如需了解支持的类型,请参阅 开发者指南。如果未指定任何类型,系统将返回所有类型。
HTML 属性:
|
零部件 | |
---|---|
prediction-item |
预测下拉菜单中的项,表示单个预测。 |
prediction-item-icon |
预测项列表中显示在每个项目左侧的图标。 |
prediction-item-main-text |
prediction-item 的一部分,即预测的主要文本。对地理位置而言,它会包含地点名称(如“上海”)或街道名称和编号(如“长安大街3号”)。默认情况下,prediction-item-main-text 为黑色。如果 prediction-item 中有任何附加文本,该文本将位于 prediction-item-main-text 之外,并且继承 prediction-item 的样式。默认情况下,此类文本会显示为灰色。附加文本通常是地址。 |
prediction-item-match |
返回的联想查询的一部分,其于用户输入相匹配。默认情况下,该匹配文本以粗体突出显示。请注意,匹配的文本可能位于 prediction-item 中的任何位置。它不一定是 prediction-item-main-text 的一部分。 |
prediction-item-selected |
用户通过键盘导航到的条目。注意:所选项将同时受到此部分样式和预测项部分样式的影响。 |
prediction-list |
视觉元素,其包含由商家信息自动填充服务所返回的联想查询列表。此列表通过下拉列表的形式显示在 PlaceAutocompleteElement 下方。 |
方法 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 参数:
返回值:
void 设置一个函数,以便在有指定事件传送到目标时调用该函数。请参阅 addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) 参数:
返回值:
void 从目标中移除之前使用 addEventListener 注册的事件监听器。请参阅 removeEventListener |
事件 | |
---|---|
gmp-placeselect |
function(placeAutocompletePlaceSelectEvent) 参数:
当用户选择地点预测结果时,系统会触发此事件。包含地点对象。 |
gmp-requesterror |
function(placeAutocompleteRequestErrorEvent) 参数:
当对后端的请求被拒绝(例如 API 密钥不正确)时,系统会触发此事件。此事件不会向上传递。 |
PlaceAutocompleteElementOptions 接口
google.maps.places.PlaceAutocompleteElementOptions
接口
用于构建 PlaceAutocompleteElement 的选项。
属性 | |
---|---|
componentRestrictions optional |
类型:
ComponentRestrictions optional |
locationBias optional |
类型:
LocationBias optional |
locationRestriction optional |
类型:
LocationRestriction optional |
requestedLanguage optional |
类型:
string optional |
requestedRegion optional |
类型:
string optional |
types optional |
类型:
Array<string> optional |
PlaceAutocompletePlaceSelectEvent 类
google.maps.places.PlaceAutocompletePlaceSelectEvent
类
此事件会在用户使用地点自动补全元素选择地点后创建。使用 event.place
访问所选内容。
此类扩展了 Event
。
通过调用 const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
进行访问。请参阅 Maps JavaScript API 中的库。
属性 | |
---|---|
place |
类型:
Place |
PlaceAutocompleteRequestErrorEvent 类
google.maps.places.PlaceAutocompleteRequestErrorEvent
类
当网络请求出现问题时,PlaceAutocompleteElement 会发出此事件。
此类扩展了 Event
。
通过调用 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
进行访问。请参阅 Maps JavaScript API 中的库。
Autocomplete 类
google.maps.places.Autocomplete
类
此微件可根据用户输入的文本提供地点预测结果。它会附加到类型为 text
的输入元素,并监听该字段中的文本输入。预测结果列表以下拉列表的形式显示,并会随着文本输入而更新。
此类扩展了 MVCObject
。
通过调用 const {Autocomplete} = await google.maps.importLibrary("places")
进行访问。请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) 参数:
创建一个新的 Autocomplete 实例,并使用给定选项将其附加到指定的输入文本字段。 |
方法 | |
---|---|
getBounds |
getBounds() 参数:无
返回值:
LatLngBounds|undefined 偏差边界。返回预测存在偏差的边界。 |
getFields |
getFields() 参数:无
返回值:
Array<string>|undefined 在成功检索详细信息时,返回要在详细信息响应中针对地点包含的字段。如需查看字段列表,请参阅 PlaceResult 。 |
getPlace |
getPlace() 参数:无
返回值:
PlaceResult 用户选择的地点。如果成功检索到详细信息,则返回用户选择的地点的详细信息。否则,返回桩地点对象,并将 name 属性设置为输入字段的当前值。 |
setBounds |
setBounds(bounds) 参数:
返回值:None
设置要返回地点结果的首选区域。结果偏向于(但不限于)此区域。 |
setComponentRestrictions |
setComponentRestrictions(restrictions) 参数:
返回值:None
设置组件限制。组件限制用于将预测限制为仅在父级组件内进行。例如,国家/地区。 |
setFields |
setFields(fields) 参数:
返回值:None
设置在成功检索详细信息时要在详细信息响应中包含的地点的字段。如需查看字段列表,请参阅 PlaceResult 。 |
setOptions |
setOptions(options) 参数:
返回值:None
|
setTypes |
setTypes(types) 参数:
返回值:None
设置要返回的预测结果类型。如需了解支持的类型,请参阅 开发者指南。如果未指定任何类型,系统将返回所有类型。 |
继承:
addListener 、bindTo 、get 、notify 、set 、setValues 、unbind 、unbindAll
|
事件 | |
---|---|
place_changed |
function() 参数:None
当用户选择的地点有 PlaceResult 可用时,系统会触发此事件。如果用户输入的不是控件建议的地点名称,并按下 Enter 键,或者地点详情请求失败,则 PlaceResult 会在 name 属性中包含用户输入的内容,且未定义其他属性。 |
AutocompleteOptions 接口
google.maps.places.AutocompleteOptions
接口
可在 Autocomplete
对象上设置的选项。
属性 | |
---|---|
bounds optional |
类型:
LatLngBounds|LatLngBoundsLiteral optional 要在哪个区域内搜索地点。 |
componentRestrictions optional |
类型:
ComponentRestrictions optional 组件限制。组件限制用于将预测限制为仅在父级组件内进行。例如,国家/地区。 |
fields optional |
类型:
Array<string> optional 成功检索详细信息时,要在详细信息响应中为地点添加的字段(将收取相应费用)。如果传入的是 ['ALL'] ,系统会返回所有可用字段并据此计费(不建议用于生产环境中的部署)。如需查看字段列表,请参阅 PlaceResult 。嵌套字段可以使用点路径(例如 "geometry.location" )指定。默认为 ['ALL'] 。 |
|
类型:
boolean optional 是否仅检索地点 ID。在触发 place_changed 事件时提供的 PlaceResult 将仅包含 place_id、types 和 name 字段,其中 place_id、types 和 description 由自动补全服务返回。默认情况下,该环境处于停用状态。 |
strictBounds optional |
类型:
boolean optional 一个布尔值,表示自动补全 widget 应仅返回在发送查询时位于自动补全 widget 边界内的地点。将 strictBounds 设置为 false (默认值)会使结果偏向于(但不限于)边界内包含的地点。 |
types optional |
类型:
Array<string> optional 要返回的预测类型。如需了解支持的类型,请参阅 开发者指南。如果未指定任何类型,系统将返回所有类型。 |
SearchBox 类
google.maps.places.SearchBox
类
一种微件,可根据用户输入的文本提供查询预测。它会附加到类型为 text
的输入元素,并监听该字段中的文本输入。预测结果列表以下拉列表的形式显示,并会随着文本输入而更新。
此类扩展了 MVCObject
。
通过调用 const {SearchBox} = await google.maps.importLibrary("places")
进行访问。请参阅 Maps JavaScript API 中的库。
构造函数 | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) 参数:
创建一个新的 SearchBox 实例,并使用给定选项将其附加到指定的输入文本字段。 |
方法 | |
---|---|
getBounds |
getBounds() 参数:无
返回值:
LatLngBounds|undefined 返回查询预测存在偏差的边界。 |
getPlaces |
getPlaces() 参数:无
返回值:
Array<PlaceResult>|undefined 返回用户选择用于 places_changed 事件的查询。 |
setBounds |
setBounds(bounds) 参数:
返回值:None
设置用于对查询预测进行偏向处理的区域。结果只会偏向于此区域,但不会完全局限于此区域。 |
继承:
addListener 、bindTo 、get 、notify 、set 、setValues 、unbind 、unbindAll
|
事件 | |
---|---|
places_changed |
function() 参数:None
当用户选择查询时,系统会触发此事件, getPlaces 应用于获取新地点。 |
SearchBoxOptions 接口
google.maps.places.SearchBoxOptions
接口
可在 SearchBox
对象上设置的选项。
属性 | |
---|---|
bounds optional |
类型:
LatLngBounds|LatLngBoundsLiteral optional 用于对查询预测进行偏向的区域。预测结果会偏向于(但不限于)定位到这些边界的查询。 |