Places Widgets

PlaceAutocompleteElement

google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement 是一个 HTMLElement 子类,可为 Places Autocomplete API 提供界面组件。

PlaceAutocompleteElement 会在内部自动使用 AutocompleteSessionToken 将用户自动补全搜索的查询和选择阶段归入不同的会话。

PlacePrediction.toPlace 返回的 Place 首次调用 Place.fetchFields 时,会自动包含用于提取 PlacePrediction 的会话令牌。

如需详细了解会话的工作方式,请访问 https://developers.google.com/maps/documentation/places/web-service/place-session-tokens

自定义元素:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

此类扩展了 HTMLElement

此类实现了 PlaceAutocompleteElementOptions

通过调用 const {PlaceAutocompleteElement} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库

PlaceAutocompleteElement
PlaceAutocompleteElement(options)
参数: 
includedPrimaryTypes
类型:  Array<string> optional
包含主要地点类型(例如“restaurant”或“gas_station”)。

仅当某个地点的主要类型包含在此列表中时,才会返回该地点。最多可以指定 5 个值。如果未指定任何类型,系统将返回所有地点类型。
HTML 属性
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
类型:  Array<string> optional
仅包含指定地区的结果,最多可指定 15 个 CLDR 双字符地区代码。空集不会限制结果。如果同时设置了 locationRestrictionincludedRegionCodes,结果将位于交集区域。
HTML 属性
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
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 属性
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
用于计算距离的起点。如果未指定,则不计算距离。如果提供了海拔高度,则不会将其用于计算。
HTML 属性
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage
类型:  string optional
一种语言标识符,用于指定结果应以哪种语言返回(如果可能)。系统可能会优先显示所选语言的结果,但建议不限于此语言。请参阅支持的语言列表
HTML 属性
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
类型:  string optional
用于设置结果格式和过滤结果的地区代码。它不会将建议限制在此国家/地区。地区代码接受 ccTLD(“顶级域名”)双字符值。多数 ccTLD 代码都与 ISO 3166-1 代码相同,但也有一些需要注意的例外情况。例如,英国的 ccTLD 为“uk”(.co.uk),而其 ISO 3166-1 代码为“gb”(从技术上讲,是指“大不列颠及北爱尔兰联合王国”这一实体)。
HTML 属性
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
类型:  UnitSystem optional
用于显示距离的单位制。如果未指定,则单位制由 requestedRegion 确定。
HTML 属性
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
prediction-item
预测下拉菜单中的项,表示单个预测结果。
prediction-item-icon
预测项列表中显示在每个项目左侧的图标。
prediction-item-main-text
预测项的一部分,是预测结果的主要文本。对地理位置而言,它会包含地点名称(如“上海”)或街道名称和编号(如“长安大街3号”)。默认情况下,prediction-item-main-text 显示为黑色。如果预测项中有任何附加文本,该文本将位于 prediction-item-main-text 之外,并且继承 prediction-item 的样式。默认情况下,此类文本会显示为灰色。附加文本通常是地址。
prediction-item-match
返回的联想查询的一部分,其于用户输入相匹配。默认情况下,该匹配文本以粗体突出显示。请注意,匹配的文本可能位于 prediction-item 中的任何位置。它不一定是 prediction-item-main-text 的一部分。
prediction-item-selected
用户通过键盘导航到的条目。注意:所选条目将同时受到此部分样式和预测条目部分样式的影响。
prediction-list
视觉元素,其包含由商家信息自动填充服务所返回的联想查询列表。此列表通过下拉列表的形式显示在 PlaceAutocompleteElement 下方。
BetaaddEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener
gmp-error
function(errorEvent)
实参: 
当对后端的请求被拒绝时(例如,API 密钥不正确),系统会触发此事件。此事件不会冒泡。
gmp-select
function(placePredictionSelectEvent)
实参: 
当用户选择地点预测结果时,系统会触发此事件。包含可转换为 Place 对象的 PlacePrediction 对象。

PlaceAutocompleteElementOptions 接口

google.maps.places.PlaceAutocompleteElementOptions 接口

用于构建 PlaceAutocompleteElement 的选项。如需了解每个属性的说明,请参阅 PlaceAutocompleteElement 类中同名的属性。

locationBias optional
类型:  LocationBias optional
locationRestriction optional
类型:  LocationRestriction optional
name optional
类型:  string optional
requestedLanguage optional
类型:  string optional

PlacePredictionSelectEvent

google.maps.places.PlacePredictionSelectEvent

此事件是在用户使用 PlaceAutocompleteElement 选择预测项后创建的。使用 event.placePrediction 访问所选内容。

通过调用 PlacePrediction.toPlace 将 placePrediction 转换为 Place

此类扩展了 Event

通过调用 const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库

placePrediction
类型:  PlacePrediction
通过调用 PlacePrediction.toPlace 将其转换为 Place

PlaceAutocompleteRequestErrorEvent

google.maps.places.PlaceAutocompleteRequestErrorEvent

当网络请求出现问题时,PlaceAutocompleteElement 会发出此事件。

此类扩展了 Event

通过调用 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库

PlaceContextualElement

google.maps.places.PlaceContextualElement

一种使用上下文令牌来显示“依托 Google 地图进行接地”响应的上下文视图的 widget。

自定义元素:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

此类扩展了 HTMLElement

此类实现了 PlaceContextualElementOptions

通过调用 const {PlaceContextualElement} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库

contextToken
类型:  string optional
上下文令牌。
HTML 属性
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
BetaaddEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数: 
返回值:  void
从目标中移除之前通过 addEventListener 注册的事件监听器。请参阅 removeEventListener

PlaceContextualElementOptions 接口

google.maps.places.PlaceContextualElementOptions 接口

PlaceContextualElement 的选项。

contextToken optional
类型:  string optional
“依托 Google 地图进行接地”响应提供的上下文令牌。

PlaceContextualListConfigElement

google.maps.places.PlaceContextualListConfigElement

一种 HTML 元素,用于配置地点情境元素的列表视图的选项。

自定义元素:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

此类扩展了 HTMLElement

此类实现了 PlaceContextualListConfigElementOptions

通过调用 const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places") 进行访问。
请参阅 Maps JavaScript API 中的库

layout
类型:  PlaceContextualListLayout optional
布局。
HTML 属性
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
类型:  boolean optional
地图是否处于隐藏状态。
HTML 属性
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
BetaaddEventListener
addEventListener(type, listener[, options])
参数: 
  • typestring一个区分大小写的字符串,表示要监听的事件类型。
  • listenerEventListener|EventListenerObject 接收通知的对象。必须是函数或具有 handleEvent 方法的对象
  • optionsboolean|AddEventListenerOptions optional 请参阅选项。自定义事件仅支持 capturepassive
返回值:  void
设置一个函数,每当指定事件传递到目标时,系统都会调用该函数。请参阅 addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
参数: 
  • typestring 一个字符串,用于指定要移除事件监听器的事件类型。
  • listenerEventListener|