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

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

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

步骤一 打开地图配置


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

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

步骤二 编辑器里添加组件


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

步骤三 定义变量


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

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

步骤四 定义低码方法


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

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

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

步骤五 给按钮定义事件


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


总结


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

相关文章
|
10月前
|
JavaScript
Fastadmin列表的多图预览(一行代码)
Fastadmin列表的多图预览(一行代码)
139 0
|
JavaScript 定位技术 API
高德地图自定义定位 按钮
高德地图自定义定位 按钮
698 0
|
11月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
201 0
|
11月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
72 0
|
7月前
|
小程序 JavaScript 定位技术
小程序点击指定地址按钮直接打开地图导航
小程序点击指定地址按钮直接打开地图导航
140 0
|
9月前
|
图形学
|
12月前
|
JSON 小程序 JavaScript
小程序地图插入图标后 怎么实现点击图标弹出窗口
小程序地图插入图标后 怎么实现点击图标弹出窗口
75 0
|
小程序
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
微信小程序右上角胶囊按钮(标题设置透明后的处理)
1626 0
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
|
前端开发 JavaScript 定位技术
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
254 0
基于OpenLayers实现导航地图上(起/终)点的交互式图标显示
下方那个移动的滑块的设计
下方那个移动的滑块的设计
48 0