跳到主要内容

地图定位

FormLocation

适用场景

用于在表单中进行地图选点定位

基础能力说明

绑定「地理位置」字段

表单容器绑定数据模型后,模型中的「地理位置」字段会自动渲染为地图定位组件,实现选点定位

配置指引

  1. 地图定位组件需进行地图 API 配置才可使用,点击地图 API,选择腾讯地图 API。若无 API,请先新建腾讯地图 API,具体请参考腾讯地图 API

  2. 小程序端使用,请按照如下步骤进行配置

    1. 小程序应用会调用微信官方的wx.getLocation接口实现定位,需符合小程序限制的类目要求(具体类目在小程序 wx.getLocation 文档中进行了介绍 点击查看),并在微信公众平台中的「开发」-「开发管理」-「接口设置」模块中,自助开通「获取当前的地理位置、速度」接口的权限。img

    2. 因小程序限制:为了开发者能够正常使用获取模糊地理位置等接口,以及后续对于代码提审环节的优化,自 2022 年 7 月 14 日起,开发者在使用地理位置相关接口时,需要提前在 app.json 中进行配置。微信说明文档 请打开低码编辑器 commom/mp.config 文件,对 appJson 配置如下图 requiredPrivateInfos 属性: requiredPrivateInfos: [ "getLocation" ]img

  3. 提交审核时的异常情况(打开控制台查看报错信息) 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、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。

属性介绍

组件接收的外部传入的属性

属性名
属性标识
类型
说明
绑定字段namestring

提交表单时会将组件值提交保存到所配置的字段中

示例:"formLocation"

字段标题labelstring

组件标题位置的显示内容

示例:"地图"

显示标题labelVisibleboolean

显示组件的标题

示例:true

地图APIsdataSourceobject

如需小程序端使用,请务必参考 配置指引 完成微信接口权限申请,并调整appJson内容

关联腾讯地图的APIs

示例:""

定位调整范围locationRangestring

示例:0

自定义范围米customRangenumber

示例:0

默认位置locationTypestring

地理位置的默认值

示例:1

必填requiredboolean

启用后该组件强制必填,值不可为空

示例:false

必填标识requiredFlagboolean

启用后,组件若要求必填,则会显示必填星号标记

示例:true

必填校验提示requiredMsgstring

启用必填,但组件值为空时的提示信息

示例:"该项为必填项"

布局方式layoutstring

示例:""

显示经纬度showLngLatboolean

显示所选位置的经纬度

示例:false

显示地图showMapboolean

显示所选位置的地图

示例:false

允许缩放zoomboolean

允许缩放地图

示例:true

允许拖动dragboolean

允许拖动地图

示例:true

禁用disabledboolean

是否禁用输入/选择,启用后组件强制显示为只读效果

示例:false

校验状态validateStatusstring

示例:"success"

事件介绍

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
选择定位坐标改变change兼容三端

-

属性 API

通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName 来访问组件内部的值,如 $w.input1.value ,详请请参考 [属性 API](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/weda-design/WidgetAPI)

只读属性名
属性标识
类型
说明
默认值valueobject

方法 API