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(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回nullconsole.log("您所选择的位置：", location);if(location){this.chooseLocation = location.address;}},onUnload() {// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果chooseLocation.setLocation(null);},methods: {getAddress() {const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在腾讯位置服务申请的keyconst 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中使用腾讯地图sdk（解析经纬度）获取用户所在位置信息
https://gblfy.blog.csdn.net/article/details/122266600

uni-app中使用腾讯位置服务实现小程序地图选点功能相关推荐

腾讯位置服务+微信小程序，一文告诉你程序员为什么不会坐过站！
引言 1.1「腾讯位置服务」是什么? 立足生态,连接未来腾讯位置服务平台依托庞大的数据生态,以定位.地图展示.地点搜索.路线规划.导航.室内图.海外图等位置服务能力和LBS大数据能力为基础,面向开发 ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
微信小程序中使用腾讯位置服务，点击地图获取poi，或者是关键词搜索
1.插件申请接入: 在腾讯公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 "腾讯位置服务地图选点&quo ...
【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线
[一起来体验腾讯位置服务功能吧] 结合自己小程序业务,集成腾讯位置服务地图功能还是不错的,推荐各位同行提前体验和使用点击我快速报名体验吧 [前言] 第一次使用腾讯位置服务也算是挺早的,当时是在web ...
腾讯位置服务----＞(小程序简单使用+显示附近WC步行路线)
体验腾讯位置服务功能,请请点击下方链接 https://lbs.qq.com?lbs_invite=9QNIFL9 1.申请Key: 地址:点击此连接登录注册申请Key 2.设置域名: 小程序管理后台 ...
【小程序】腾讯云服务配置小程序流程
配置小程序流程 [小程序]SSL配置 [小程序]Nginx配置https协议 [小程序]微信小程序配置
微信小程序上传图片到腾讯云服务器,微信小程序（发帖功能），上传本地图片到腾讯云怎么实现？...
1 我刚开始用 lin-ui组件的 imagePicker组件,但是只能实现图片本地上传,本地预览.删除等功能, 无法跟腾讯云cos对象存储交互. cos对象代码 cos.putObject({ Bu ...
小程序定位，接入腾讯位置服务
接入腾讯位置服务官方文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 一.接入腾讯位置服务步骤公众号扫码注册,选择你要授权的小程序,到授权成功然后腾讯 ...
腾讯位置服务：有何优势？如何使用平台创建应用和服务调用的 Key？
文章目录前言一.腾讯位置服务的优势 1.1.提供丰富的地图产品 1.2.提供行业解决方案 1.3.提供其他生态维度的支持 1.4.海量的数据基础 1.5.丰富的开发文档二.初识腾讯位置服务 2. ...