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

文章目录

一、思路
二、逆地址解析
- 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>

注：可能在微信开发者工具上调用时会报错，不过在真机上调试就没问题

成功截图:

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

微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
微信小程序使用腾讯位置服务地图选点实现地址的选取|微信小程序腾讯位置服务地图选点请求来源未被授权
效果图首先要在微信开放平台的小程序里添加插件具体配置,可以参考官方文档腾讯位置服务地图选点 | 小程序插件 | 微信公众平台 (qq.com) 同时还要申请接口的权限,不然小程序上线的时候不能 ...
【中级】微信小程序 - 腾讯云 - wafer2 - PHP - DEMO - 003 - 源码分析 - 01 - 文件组成详细分析
1 前言: 本文原创,欢迎转载,但是,务必保持原文并且给出原文链接. 微信小程序 - 腾讯云 - PHP - DEMO 是微信提供的一个微信小程序和腾讯云小程序云服务wafer 进行接口的例子. 本仓 ...
关闭微信小程序电脑端的位置定位
关闭微信小程序电脑端的位置定位关闭微信小程序电脑端的位置定位 1.使用fiddler获取微信小程序获取定位的网址 2.在host文件中将其禁止 3.删除微信小程序的缓存 3.再启动微信小程序即可关 ...
uni-app 微信小程序用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
php qcloud sdk weapp_微信小程序腾讯云php后台解决方案
微信小程序腾讯云php后台解决方案微信小程序前段需要添加必要的文件以配合后端 (1)wafer2-client-sdk sdk提供了几种接口包括登陆,获取用户openid,图片上传等 (2)conf ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...

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

文章目录

一、思路

二、逆地址解析

2.1. app.json

2.2. 页面加入

2.3. 后台代码

三、地图插件调用

3.1. app.json加入

3.2. js页面加入

3.3. wxml页面

成功截图:

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

最新文章

热门文章

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

文章目录

一、思路

二、逆地址解析

2.1. app.json

2.2. 页面加入

2.3. 后台代码

三、地图插件调用

3.1. app.json加入

3.2. js页面加入

3.3. wxml页面

成功截图:

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

最新文章

热门文章

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

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