uni-app小程序结合腾讯地图获取定位以及地图选址
2021/12/3 11:06:41
本文主要是介绍uni-app小程序结合腾讯地图获取定位以及地图选址,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
表单中的地址用地图的方式进行编辑与选址
- 看效果
- 第一步:登录公众平台==>设置==>第三方设置
- 第二步:登录腾讯地图申请属于自己小程序的key
- 第三步:找到腾讯地图的插件
- 第四步:添加插件与允许授权
- 第五步:通过点击事件进入插件
- 第六步:拿到接口调用的数据
看效果
第一步:登录公众平台==>设置==>第三方设置
第二步:登录腾讯地图申请属于自己小程序的key
腾讯地图官网
第三步:找到腾讯地图的插件
腾讯地图插件
在这里我们用到的是,地图选点
第四步:添加插件与允许授权
第五步:通过点击事件进入插件
//记得在manifest.json中添加plugins,不然无法使用插件 1. 获取uni官方的获取当前位置的方法(uni.authorize) 2. 如果获取到了当前的位置就可以直接把经纬度传给那个引用插件的方法 3. 如果当前的input框是有地址的,那就把这个地址的经纬度传给那个goMao这就是getLocation方法中判断的意思
//这个方法是点击input之后进来的选地址的事件 getLocation() { let that = this //这里是拿手机获取地理位置的信息 uni.authorize({ scope: 'scope.userLocation', success() { //若是用户同意授权,则会跳转到此函数,可以在此调用获取位置信息的api uni.getLocation({ type: 'gcj02', success: res => { //这里是拿到表单中的经纬度用于回显地图的位置,然后地图根据经纬度发生变化 //这里的判断是为了判断当前进来的时候有没有地址 //如果有地址就显示当前的经纬度,没有就显示的是当前位置的经纬度 if (!that.form.longitude) { //这个将我们现在的位置传给下面的goMap方法 that.goMap(res.longitude, res.latitude) }else{ that.goMap(that.form.longitude,that.form.latitude) } } }); }, fail(err) { console.log(err) } }) },
//地图选点方法 goMap(lng, lat) { const key = ''; //使用在腾讯位置服务申请的key const referer = ''; //调用插件的app的名称 const location = JSON.stringify({ latitude: lat, longitude: lng }); const category = '生活服务,娱乐休闲'; uni.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category }) },
第六步:拿到接口调用的数据
不知道是啥的可以打印一下
onShow() { const location = chooseLocation.getLocation() if (location) { console.log('location', location) this.form.address = location.address this.form.longitude = location.longitude this.form.latitude = location.latitude } }, onUnload() { // 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果 chooseLocation.setLocation(null); },
以上就完成啦~
这篇关于uni-app小程序结合腾讯地图获取定位以及地图选址的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介