地图定位
#
适用场景用于在表单中进行地图选点定位
#
基础能力说明#
绑定「地理位置」字段表单容器绑定数据模型后,模型中的「地理位置」字段会自动渲染为地图定位组件,实现选点定位
#
配置指引地图定位组件需进行地图 API 配置才可使用,点击地图 API,选择腾讯地图 API。若无 API,请先新建腾讯地图 API,具体请参考腾讯地图 API
小程序端使用,请按照如下步骤进行配置
小程序应用会调用微信官方的wx.getLocation接口实现定位,需符合小程序限制的类目要求(具体类目在小程序 wx.getLocation 文档中进行了介绍 点击查看),并在微信公众平台中的「开发」-「开发管理」-「接口设置」模块中,自助开通「获取当前的地理位置、速度」接口的权限。
因小程序限制:为了开发者能够正常使用获取模糊地理位置等接口,以及后续对于代码提审环节的优化,自 2022 年 7 月 14 日起,开发者在使用地理位置相关接口时,需要提前在 app.json 中进行配置。微信说明文档 请打开低码编辑器 commom/mp.config 文件,对 appJson 配置如下图 requiredPrivateInfos 属性: requiredPrivateInfos: [ "getLocation" ]
提交审核时的异常情况(打开控制台查看报错信息) 1、错误信息为:请求微信接口数据错误;61040;代码中含有 ext.json 未配置隐私接口 getLocation(暂…_use 为 true)后再提交审核。请参考上面小程序配置的第二步进行 appJson 文件配置 2、错误信息为:请求微信接口数据错误;61040;ext.json 配置的隐私接口 getLocation 无权限,请申请权限后再提交审核。请参考上面小程序配置的第一步进行 wx.getLocation 接口权限申请
#
扩展场景说明#
定位调整范围配置组件提供了「定位调整范围」属性,可约束用户的选点定位范围,仅可为当前实际定位点的一定范围内
#
异常报错情况说明浏览器定位失败的几种情况:
1)Browser not Support html5 geolocation:浏览器不支持原生定位接口,如 IE 较低版本的浏览器等。
2)Geolocation permission denied:用户禁用了定位权限,需要用户开启设备和浏览器的定位权限,并在浏览器弹窗中点击“允许使用定位”选项。
3)Geolocation permission denied:浏览器禁止了非安全域的定位请求,比如 Chrome、IOS10 已陆续禁止,这时候需要升级站点到 HTTPS。注意 Chrome 不会禁止 localhost 等域名 HTTP 协议下的定位。
4)Geolocation permission denied:Access to geolocation was blocked over secure connection with mixed content,也就是在 Https 的页面中引用的 http 的资源。
5)Get geolocation time out:浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象,另外还有个别浏览器(如 google Chrome 浏览器等)本身的定位接口是黑洞,通过其请求定位完全没有回应,也会超时返回失败。
6)Get geolocation failed:定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
绑定字段 | name | string | 基础属性 | "formLocation" | 提交表单时会将组件值提交保存到所配置的字段中 |
字段标题 | label | string | 基础属性 | "地图" | 组件标题位置的显示内容 |
显示标题 | labelVisible | boolean | 基础属性 | true | 显示组件的标题 |
地图APIs | dataSource | object | 基础属性 | "" | 关联腾讯地图的APIs |
定位调整范围 | locationRange | {"label":"不限","value":0}|{"label":"100米内","value":100}|{"label":"300米内","value":300}|{"label":"500米内","value":500}|{"label":"1000米内","value":1000}|{"label":"2000米内","value":2000}|{"label":"自定义","value":-1} | 基础属性 | 0 | - |
自定义范围米 | customRange | number | 基础属性 | 0 | - |
默认位置 | locationType | {"label":"无","value":1}|{"label":"用户当前位置","value":2} | 基础属性 | 1 | 地理位置的默认值 |
必填 | required | boolean | 基础属性 | false | 启用后该组件强制必填,值不可为空 |
必填标识 | requiredFlag | boolean | 基础属性 | true | 启用后,组件若要求必填,则会显示必填星号标记 |
必填校验提示 | requiredMsg | string | 基础属性 | "该项为必填项" | 启用必填,但组件值为空时的提示信息 |
布局方式 | layout | {"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"} | 高级属性 | "" | - |
显示经纬度 | showLngLat | boolean | 高级属性 | false | 显示所选位置的经纬度 |
显示地图 | showMap | boolean | 高级属性 | false | 显示所选位置的地图 |
允许缩放 | zoom | boolean | 高级属性 | true | 允许缩放地图 |
允许拖动 | drag | boolean | 高级属性 | true | 允许拖动地图 |
禁用 | disabled | boolean | 高级属性 | false | 是否禁用输入/选择,启用后组件强制显示为只读效果 |
校验状态 | validateStatus | {"label":"success","value":"success"}|{"label":"warn","value":"warn"}|{"label":"error","value":"error"} | 高级属性 | "success" | - |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
选择定位坐标改变 | change | 兼容三端 | - |