微信小程序结合腾讯地图获取用户所在地址

2021-12-09   阅读:1398   分类:后端    标签: 微信小程序

一、前提:

1、申请腾讯地图api接口:https://lbs.qq.com/

注册账号并创建应用,会得到一个KEY

2、下载微信小程序JavaScriptSDK:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

3、安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

二、代码编写:

小程序端结合wx.getLocation({})接口

1、引入sdk:

// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('@/utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
var qqmapsdk;

2、放置按钮,需要用户授权允许

<button class="btn_submit" bindtap="chooseMapViewTap">获取地址</button>

3、打开app.json,加入如下代码

 "permission": {
  "scope.userLocation": {
   "desc": "小程序将获取你当前所在位置"
  }
 }

4、点击事件方法

// 选择位置
chooseMapViewTap: function () {
 var __that = this
  // 实例化API核心类
 qqmapsdk = new QQMapWX({
	 key: 'key'
 });
  //1、获取当前位置坐标
 wx.getLocation({
	type: 'wgs84',
	// altitude: true,
	// isHighAccuracy: true,
	success: function (res) {
	 console.log(res);
	 //2、根据坐标获取当前位置名称,显示在顶部:腾讯地图逆地址解析
	 qqmapsdk.reverseGeocoder({
		location: {
		 latitude: res.latitude,
		 longitude: res.longitude
		},
		success: function (addressRes) {
		 __that.isaddressss=addressRes.result.formatted_addresses.recommend
		 console.log(__that.isaddressss)
		 // console.log(addressRes.result.formatted_addresses.recommend);
		 // var address = addressRes.result.formatted_addresses.recommend;
		 // app.globalData.address = address;
		}
	 })
	}
 })
 }

三、效果展示:

【腾讯云】预热专享1888元早鸟券一键领取,云服务器等爆品抢先购低至4.2元/月

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/861.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×