一、前提:1、申请腾讯地图api接口:https://lbs.qq.com/注册账号并创建应用,会得到一个KEY2、下载微信小程序JavaScriptSDK:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview3、安全域名设置,在小
一、前提:
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;
}
})
}
})
}
三、效果展示:
沃梦达教程
本文标题为:微信小程序结合腾讯地图获取用户所在地址


基础教程推荐
猜你喜欢
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18
- IOS获取系统相册中照片的示例代码 2023-01-03
- Android实现短信验证码输入框 2023-04-29
- Android开发Compose集成高德地图实例 2023-06-15
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07
- iOS开发使用XML解析网络数据 2022-11-12
- Flutter进阶之实现动画效果(三) 2022-10-28
- Android Compose自定义TextField实现自定义的输入框 2023-05-13
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- iOS开发 全机型适配解决方法 2023-01-14