利用微搭低代码实现地图点选功能

简介: 利用微搭低代码实现地图点选功能

日常很多小程序提供了在线预约的功能,在信息提交的时候希望获取用户的详细地址。为了提高用户的使用体验,往往通过地图点选的功能来帮助用户选择地址。本篇就讲解一下如何实现这样的功能。

步骤一 打开地图配置


想调用腾讯地图,需要先让小程序授权可以获取用户的位置信息。打开低码编辑器

将里边的权限打开,这样就可以获取用户的位置信息了

步骤二 编辑器里添加组件


实现的功能是在表单输入组件里显示地址,通过按钮点击时候调用腾讯地图,组件大纲如下

步骤三 定义变量


要想点选地址后在表单输入组件上显示内容,就需要先定义一个变量

变量定义好后需要和表单输入组件做变量绑定

步骤四 定义低码方法


一般我们执行的各种动作,除了使用平台方法外,就是定义低码方法了,我们可以创建一个chooseAddress低码方法,用来调用小程序的api

export default function({event, data}) {
wx.chooseLocation({
 success (res) {
   let address = res.address
   $page.dataset.state.address = address
 }
 })
}

代码的意思是调用微信的点选地点API,成功获取地址后赋值给变量即可

步骤五 给按钮定义事件


低码方法创建好之后,可以给按钮增加行为,调用我们的低码方法即可


总结


我们本节是介绍了微搭中如何调用微信的api,其实熟练的使用微信的api可以做出很多方便的功能,用户体验越好,为用户想的越多,就有越多的人喜欢使用你的小程序。

相关文章
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
359 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
4月前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
95 1
|
5月前
|
安全 程序员 定位技术
程序员必知:地图显示的步骤
程序员必知:地图显示的步骤
67 8
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
343 0
|
5月前
|
Python
Python实现用鼠标截图功能
Python实现用鼠标截图功能
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
278 0
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
119 0
|
小程序
小程序实现下拉刷新页面
小程序实现下拉刷新页面
117 2
|
图形学