spz-map 地点选择器
用于在地图中选择一个具体的地点。
布局
跳转到“布局”何时使用
跳转到“何时使用”- 当需要通过地图手动选择一个具体的地点时。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”最基本用法。
属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| origin-id | 地图服务授权来源 ID | string | - | 是 |
| place-search | 用于搜索框的元素 ID(需包含 input 子元素) |
string | - | 否 |
| place-id | 地点 ID,若配置则地图初始化后自动定位到该地点 | string | - | 否 |
| lang | Google Maps API 使用的语言代码 | string | en |
否 |
| default-lat | 地图默认中心点纬度 | number | 40.749933 |
否 |
| default-lng | 地图默认中心点经度 | number | -73.98633 |
否 |
| map | 子元素中承载地图渲染的容器元素 ID 或属性名 | string | - | 否 |
| manual-location | 若该属性存在,禁用自动定位,需手动触发位置授权 | - | - | 否 |
| base-map | 若该属性存在,仅渲染基础地图,不启用地点搜索功能 | - | - | 否 |
| url-prefix | 接口请求的 URL 前缀 | string | "" |
否 |
| normal-zoom | 地图默认缩放级别 | number | 13 |
否 |
| marker-zoom | 选中地点后的缩放级别 | number | 17 |
否 |
| token-id | 请求地图详情接口时使用的订单 token | string | - | 否 |
| keep-search | 若该属性存在,搜索框在选择地点后不会自动清空 | - | - | 否 |
| fordeal-country-code | 启用额外地图搜索服务的国家代码,多个用 , 分隔 |
string | - | 否 |
| address-fields | 自定义地址字段解析顺序,多个字段用 ; 分隔 |
string | - | 否 |
方法
跳转到“方法”initMap
跳转到“initMap”初始化或重新定位地图到指定坐标/查询。
| 参数名 | 说明 | 类型 | 是否必需 |
|---|---|---|---|
| lat | 目标纬度 | number | 否 |
| lng | 目标经度 | number | 否 |
| query | 文字搜索地点名称(与 lat/lng 二选一) | string | 否 |
| tips | 信息窗口内容 | string | 否 |
| zoom | 缩放级别 | number | 否 |
| isShowTip | 是否显示信息窗口,默认 true |
boolean | 否 |
requestPermissions
跳转到“requestPermissions”触发浏览器地理位置授权请求,获取当前位置,无需参数。
setTips
跳转到“setTips”更新地图信息窗口内容与中心点。
| 参数名 | 说明 | 类型 | 是否必需 |
|---|---|---|---|
| content | 信息窗口 HTML 内容 | string | 否 |
| location | 中心点坐标 { lat, lng } |
object | 否 |
| zoom | 缩放级别 | number | 否 |
clear
跳转到“clear”清空搜索框输入,无需参数。
getMapDetail
跳转到“getMapDetail”通过地点 ID 获取地点详情并触发相关事件。
| 参数名 | 说明 | 类型 | 是否必需 |
|---|---|---|---|
| placeId | Google Maps 地点 ID | string | 是 |
事件
跳转到“事件”mounted
跳转到“mounted”地图初始化完成且 place-id 定位成功后自动触发。event 对象包含地点信息(displayName、formattedAddress、location、placeId)。
searchPlace
跳转到“searchPlace”用户通过搜索框选择地点后触发。event 对象包含 formattedAddress、displayName、placeId、lat、lng 等字段。
mapSelect
跳转到“mapSelect”用户在地图上点击选择地点后触发。event 对象包含 lat、lng、location、placeId、type 等字段。
locationQuery
跳转到“locationQuery”通过 initMap 方法以文字查询定位后触发。event 对象包含地点信息。
fetchSuccess
跳转到“fetchSuccess”地图相关接口请求成功后触发。
fetchFail
跳转到“fetchFail”地图相关接口请求失败后触发。event 对象包含错误信息字符串。
notSupport
跳转到“notSupport”当前浏览器不支持地理定位 API 时触发。
notAutoAgreeAuth
跳转到“notAutoAgreeAuth”自动定位时用户拒绝地理位置授权后触发。
notManualAgreeAuth
跳转到“notManualAgreeAuth”手动触发定位时用户拒绝地理位置授权后触发。
manualLocationAuth
跳转到“manualLocationAuth”手动触发定位且用户同意授权后成功获取位置时触发。event 对象包含地点信息及 lat、lng 字段。
autoLocationAuth
跳转到“autoLocationAuth”自动定位且用户同意授权后成功获取位置时触发。event 对象包含地点信息及 lat、lng 字段。