微信小程序+腾讯地图 获取定位与地图选点插件

在这里插入图片描述

文章目录

          • 一、思路
          • 二、逆地址解析
            • 2.1. app.json
            • 2.2. 页面加入
            • 2.3. 后台代码
          • 三、地图插件调用
            • 3.1. app.json加入
            • 3.2. js页面加入
            • 3.3. wxml页面
            • 成功截图:

腾讯位置服务官网: https://lbs.qq.com

一、思路

通过 wx.getLocation 返回经纬度传到后台,后台调用腾讯地图提供的逆地址解析返回用户位置;
给个按钮让用户点击调用腾讯地图选点插件,自己选择位置修改

二、逆地址解析
2.1. app.json

.小程序页面代码
app.json必须加入

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
2.2. 页面加入
onLoad: function (options) {let that = this;that.authodAdress();}authodAdress() {//是否授权获取地址let that = this;wx.getSetting({success: (res) => {if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {wx.showModal({title: '是否获取当前位置',content: '需要获取您的地理位置,请确认授权,否则无法获取您所需数据',success: function (res) {if (res.cancel) {wx.showModal({title: '授权失败',icon: 'success',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showModal({title: '授权成功',icon: 'success',duration: 1000})that.getAddress();} else {wx.showModal({title: '授权失败',icon: 'success',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {that.getAddress();} else {that.getAddress();}}})},getAddress() {//获取地址let that = this;wx.getLocation({type: 'wgs84',isHighAccuracy: true,//开启高精度定位success(res) {console.log("获取地理位置----------")console.log(res)//这里改成自己封装好调用后台的apilocationApi.getLocationConvert(res).then((apiRes) => {console.log("调用后台返回地址--------")console.log(apiRes)})}})},
2.3. 后台代码
//逆地址解析url
private static final String locationUrl = "https://apis.map.qq.com/ws/geocoder/v1/";/*** 逆地址解析** @param lat 纬度* @param lng 经度**/
public static HttpClientResult convertPosition(String lat, String lng) throws Exception {Map<String, String> param = new HashMap<>(16);param.put("location", String.format("%s,%s", lat, lng));param.put("key", "腾讯地图开发密钥");param.put("output", "json");//改成自己封装好的调用接口HttpClientResult httpClientResult = getHttpClientResult(locationUrl, param);if (!httpClientResult.getContent().isEmpty()) {String all = httpClientResult.getContent().toJSONString().replaceAll("(?<=\"lat\":\\s)(\\d+\\.\\d+)", "\"$1\"").replaceAll("(?<=\"lng\":\\s)(\\d+\\.\\d+)", "\"$1\"");httpClientResult.setContent(JSONObject.parseObject(all));}return httpClientResult;
}

注意:在微信开发工具里,点击取消授权之后在进来点击确定,可能无法进入用户权限设置页面。在真机上调试就没问题
成功实例:
在这里插入图片描述

三、地图插件调用
3.1. app.json加入
"plugins": {"chooseLocation": {"version": "1.0.5","provider": "wx76a9a06e5b4e693e"}}
3.2. js页面加入
const chooseLocation = requirePlugin('chooseLocation');//导入插件onShow: function () {let that = this;// 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象const location = chooseLocation.getLocation();// 如果点击确认选点按钮,则返回选点结果对象,否则返回null}showMap() {//显示地图const key = ""; //使用在腾讯位置服务申请的keyconst referer = '星火之志'; //调用插件的app的名称wx.navigateTo({url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer});//老版本调用// wx.chooseLocation({//   success: function(e) {//     console.log(e)//     t.setData({//       // now_location_name: e.address,//       // now_location_lat: e.latitude,//       // now_location_lng: e.longitude,//       // now_detail_address: e.name//     });//   },//   fail: function(t) {console.log(t)},//   complete: function(t) {console.log(t)}// });}
3.3. wxml页面
<button bindtap="showMap" style="margin-top:10px">选择位置</button>

注:可能在微信开发者工具上调用时会报错,不过在真机上调试就没问题
在这里插入图片描述

成功截图:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端工具安装和运行相关

目录1. nodemon 运行出错&#xff1a;无法运行脚本2. XXX~待续1. nodemon 运行出错&#xff1a;无法运行脚本 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\nodemon.ps1&#xff0c;因为在此系统上禁止运行脚本。 解决办法&#xff1a; 管理员身份打开powerShell&#xf…

友盟+联合EB级云数据 实现友盟域和企业私域数据全面融合

友盟联合EB级云数据 实现友盟域和企业私域数据全面融合 2020-04-28 互联网大数据计算 国内领先的第三方全域数据智能服务商友盟&#xff0c;联合阿里云EB级云数据仓库MaxCompute为企业提供面向分析的&#xff0c;实现友盟域数据与企业私域数据全面融合的自助分析服务“U-DOP…

微信小程序之实现地图定位(使用腾讯位置服务插件)

文章目录一. 腾讯位置服务插件简介1. 完整的地图能力2. 地图插件的优势二. 开通腾讯位置服务三、接入插件四、 开发者密钥配置五、插件的使用一. 腾讯位置服务插件简介 1. 完整的地图能力 腾讯位置服务基于微信提供的小程序插件能力&#xff0c;专注于&#xff08;围绕&#…

分享16个经典的免费UI素材网站

免费字体 www.fontspace.com 一键AI抠图 www.remove.bg/zh 在线PS工具/可以转换Sketch文件

单人开发场景下的测试环境实践

在软件研发过程中&#xff0c;“测试环境”是部署最频繁、也是开发者使用最频繁的一种运行环境&#xff0c;稳定而易用的测试环境能够极大提高开发者的工作效率和幸福感。为更好的将阿里巴巴在测试环境管理方面的实践和经验跟广大开发者分享&#xff0c;《云效说码》策划了《阿…

函数计算如何访问 PostgreSQL 数据库

函数计算&#xff08;Function Compute&#xff09;&#xff1a;函数计算 是事件驱动的全托管计算服务。使用函数计算&#xff0c;您无需采购与管理服务器等基础设施&#xff0c;只需编写并上传代码。函数计算为您准备好计算资源&#xff0c;弹性地可靠地运行任务&#xff0c;并…

智能可穿戴迎来长续航焕新活力 出门问问TicWatch Pro 3即将国内上市

人工智能独角兽公司出门问问将于10月21日面向国内市场正式发布全新一代旗舰级全智能手表TicWatch Pro 3&#xff08;4G版&#xff09;。出门问问携手新浪科技举行新品线上发布会&#xff0c;出门问问创始人兼CEO李志飞以及出门问问研发高级总监张博将以直播形式与消费者见证Tic…

uniapp 微信小程序打包发布

文章目录一、打包小程序1. HBuilder X打包2. 小程序发行3. 点击上传4. 扫码体验5. 正式版本一、打包小程序 1. HBuilder X打包 选中项目-点击发行&#xff08;U&#xff09;- 小程序-(微信仅适用于uniapp)&#xff08;W&#xff09; 2. 小程序发行 填写微信小程序名称和微…

祝贺!两位 Apache Flink PMC 喜提 Apache Member

摘要&#xff1a;近期 Apache 软件基金会&#xff08;以下简称 ASF &#xff09;举行了一年一度的董事会选举会议&#xff0c;两位 Apache Flink PMC 当选为 2020 年 ASF 新成员&#xff0c;即 Apache Member。目前&#xff0c;国内&#xff08;华人&#xff09;近 30 位 Apach…

Iceberg 在基于 Flink 的流式数据入库场景中的应用

本文以流式数据入库的场景为基础&#xff0c;介绍引入 Iceberg 作为落地格式和嵌入 Flink sink 的收益&#xff0c;并分析了当前可实现的框架及要点。 应用场景 流式数据入库&#xff0c;是大数据和数据湖的典型应用场景。上游的流式数据&#xff0c;如日志&#xff0c;或增量…

uniapp H5页面打包发布

文章目录1. 打开 HBuilder2. 打开项目3. 点击发行4. 等待项目编译5. 查看路径6. 安装7. 启动1. 打开 HBuilder 2. 打开项目 打开当前要打包的项目 3. 点击发行 &#xff0c;找到【网站 - PC web 或手机 H5 】 确认【网站标题】&#xff0c;无需【网站域名】&#xff0c;直…

Python 让我再次在女同学面前长脸了!(真实案例)

事情是经过这样的&#xff1a;晚上在家王者的时候&#xff0c;微信突然弹出了一条好友添加提醒&#xff0c;一看昵称&#xff0c;居然是我们大学的班花&#xff01;&#xff01;&#xff01;这真是奇怪了&#xff0c;我之前连班花的微信都没加上&#xff0c;这次却突然主动加我…

【CDN】最近,你的APP崩了吗?

过去几个月里&#xff0c;#xxx崩了#这个话题频繁出现在热搜榜上&#xff0c;让不少程序员小哥哥瑟瑟发抖。 从疫情宅家时期著名的视频APP“三连崩”&#xff0c;到全面复工开课后的在线教育平台与办公软件频繁宕机&#xff0c;再到报复性消费引发的点餐系统接连“爆炸”&#x…

1024程序员节重要议程曝光,开源技术英雄会聊开源“真心话”

10 月 23-25 日&#xff0c;由 CSDN 等多家单位精心筹划的“长沙 中国 1024 程序员节”将盛大举行。程序员节活动以开源为主议题&#xff0c;包括&#xff1a;2场岳麓尖峰对话&#xff1b;2020 开源技术英雄大会&#xff1b;10 场热门技术分论坛/峰会&#xff1b;创意集市&…

绿网天下:上云解决系统安全和安全合规

公司简介 绿网天下&#xff08;福建&#xff09;网络科技股份有限公司&#xff08;以下简称绿网天下&#xff09;成立于2006年&#xff0c;总部设于中国厦门软件园生产基地。绿网天下是基于网络安全为基础的 K12 在线教育服务提供商&#xff0c;累计活跃用户数超千万。公司专注…

一键快速生成 Vue 的 HTML页面结构代码

目录 1. 创建配置文件2. 使用3. 配置说明4. 注意VS Code除了使用 !+Tab 在html文件中快速创建html结构代码之外,还可以自己定义代码段,这里分享如下在 Vue 环境下快速通过成 html 结构。 1. 创建配置文件 第一步 文件 ==> 首选项 ==>用户代码片段 第二步 搜索框中输…

蓝色巨人IBM全力奔赴的混合云之旅能顺利吗?

整理 | 郑丽媛头图 | CSDN下载自东方IC10 月 8 日&#xff0c;IBM 官方宣布&#xff0c;为了加速启动混合云发展战略&#xff0c;关注混合云的增长&#xff0c;目前正在计划把IT基础设施服务部门作为一家独立的上市公司分出来&#xff0c;形成两家上市公司。新公司暂定名为 New…

冠赢网络:游戏盾彻底解决DDoS/CC攻击

公司简介 厦门冠赢网络科技有限公司是一家高速发展的新型网络科技公司。2019年3月&#xff0c;冠赢网络荣任厦门市动漫游戏产业协会副会长单位&#xff1b;2019年5月&#xff0c;冠赢网络荣获“VR百强企业”称号。公司集手游、网游、VR游戏、直播平台的开发、推广、销售及运营…

腾讯位置服务地图选点这个怎么在小程序里面更新呀?

修改version https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html

完美日记:保障电商大促活动平稳运行

公司简介 PerfectDiary完美日记是广州逸仙电子商务有限公司旗下美妆品牌&#xff0c;创立于2016年。2016年&#xff0c;来自哈佛大学的品牌创始人和英国时尚设计师在伦敦相遇&#xff0c;希望有机会把欧美彩妆风尚带回亚洲&#xff0c;在视觉形象上有所突破。完美日记从T台获取…