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中使用腾讯位置服务实现小程序地图选点功能的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。