uni-app中使用腾讯位置服务实现小程序地图选点功能
2022/1/1 12:37:53
本文主要是介绍uni-app中使用腾讯位置服务实现小程序地图选点功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 1. 官方文档
- 2. 小程序添加插件
- 3. HBuilder配置
- 4. 配置代码
- 5. 页面代码
1. 官方文档
技术选定(地图选点插件)
(对应官网:https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker )
2. 小程序添加插件
去微信小程序中-设置
https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1361472091&lang=zh_CN
直接搜索腾讯位置服务地图选点
插件即可
准备工作:登录微信公众平台后,添加的插件,如上图
- 如果是微信小程序则直接按照,文档给定的4项步骤配置完成
3. HBuilder配置
** 如果使用uni-app开发的小程序,配置的位置 HBuilder工具中注意 **
如图:
4. 配置代码
实现代码【上面链接官方都有】
manifest.json
/* 小程序特有相关 */ "mp-weixin": { "appid": "wx6a968da933xxxxxx", "setting": { "urlCheck": false, "es6": true }, "usingComponents": true, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } }, "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } } },
5. 页面代码
<template> <view> 您已选择:{{chooseLocation}} </view> </template> <script> export default { data() { return { chooseLocation: '中国', }; }, onLoad() { this.getAddress(); }, // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象 onShow() { const chooseLocation = requirePlugin('chooseLocation'); const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null console.log("您所选择的位置:", location); if(location){ this.chooseLocation = location.address; } }, onUnload() { // 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果 chooseLocation.setLocation(null); }, methods: { getAddress() { const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在腾讯位置服务申请的key const referer = '那年绿荫下白裙的你'; //调用插件的app的名称 const location = JSON.stringify({ latitude: 39.89631551, longitude: 116.323459711 }); const category = '生活服务,娱乐休闲'; wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category }); }, } }; </script> <style lang="scss" scoped> </style>
这篇关于uni-app中使用腾讯位置服务实现小程序地图选点功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南