跳到主要内容

地图定位

适用场景#

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

基础能力说明#

绑定「地理位置」字段#

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

配置指引#

  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基础属性""关联腾讯地图的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-
自定义范围米customRangenumber基础属性0-
默认位置locationType{"label":"无","value":1}|{"label":"用户当前位置","value":2}基础属性1地理位置的默认值
必填requiredboolean基础属性false启用后该组件强制必填,值不可为空
必填标识requiredFlagboolean基础属性true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring基础属性"该项为必填项"启用必填,但组件值为空时的提示信息
布局方式layout{"label":"自动","value":""}|{"label":"水平","value":"horizontal"}|{"label":"垂直","value":"vertical"}高级属性""-
显示经纬度showLngLatboolean高级属性false显示所选位置的经纬度
显示地图showMapboolean高级属性false显示所选位置的地图
允许缩放zoomboolean高级属性true允许缩放地图
允许拖动dragboolean高级属性true允许拖动地图
禁用disabledboolean高级属性false是否禁用输入/选择,启用后组件强制显示为只读效果
校验状态validateStatus{"label":"success","value":"success"}|{"label":"warn","value":"warn"}|{"label":"error","value":"error"}高级属性"success"-

事件介绍#

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

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