admin管理员组文章数量:1567516
文档:
- wx.getLocation(Object object) 获取当前的地理位置、速度
- 腾讯位置服务 微信小程序JavaScript SDK
一、获取接口权限
根据腾讯地图文档需要完成以下几个步骤:
1、创建应用: https://lbs.qq/dev/console/application/mine
- 申请开发者密钥(key)
- 填写微信小程序授权 APP ID
- 勾选WebserviceAPI 域名白名单
2、下载微信小程序JavaScriptSDK(如果地址失效请到官网下载)
https://mapapi.qq/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
解压后放在目录
libs/qqmap-wx-jssdk.js
3、微信小程序后台添加安全域名
重要
如果不添加request合法域名,测试版本正常,线上版本会获取不到数据
request合法域名 https://apis.map.qq
二、使用
单独提取出功能函数 utils/qq-map.js
/**
* 腾讯地图 微信小程序JS API
* https://lbs.qq/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
*/
import QQMapWX from '../libs/qqmap-wx-jssdk.js';
// 申请开发者密钥(key)
const QQMAP_KEY = 'xxx';
const qqmapsdk = new QQMapWX({
key: QQMAP_KEY,
});
/**
* 逆地址解析(坐标位置描述)
* options: {location: {latitude: 纬度, longitude: 经度}}
*/
export function reverseGeocoder(options) {
return new Promise((resolve, reject) => {
qqmapsdk.reverseGeocoder({
...options,
success: resolve,
fail: reject,
});
});
}
使用 pages/index/index.js
import { reverseGeocoder } from '../../utils/qq-map.js';
async getIpInfo() {
// 1、通过微信小程序获取当前位置坐标,需要用户点击授权按钮
const locationRes = await wx.getLocation({
type: 'wgs84',
});
console.log(locationRes);
if (locationRes.errMsg == 'getLocation:ok') {
// 2、根据坐标获取位置的详细信息
const reverseRes = await reverseGeocoder({
location: {
latitude: locationRes.latitude,
longitude: locationRes.longitude,
}
});
console.log(reverseRes);
// 行政区域码
let locationCode = reverseRes.result.ad_info.adcode;
}
},
如果用户未授权位置信息获取,可以降级使用ip获取用户位置信息
Python/PHP:免费IP归属地查询接口和通过ip获取大致位置信息
2023-04-25更新
如果是在uniapp上使用,H5开发环境中,发现有跨域问题,我采用的方式是服务端调用腾讯地图的接口,再将数据返回给前端使用
前端 <-> 腾讯地图
改为:
前端 <-> 服务端 <-> 腾讯地图
2024-04-16更新
自 2022 年 7 月 14 日起,微信小程序要使用地理位置需要完成接口权限开通和在 app.json
中进行配置
1、接口权限开通
以下 8 个接口需完成准入开通流程:
wx.getFuzzylocation
wx.getLocation
wx.onLocationChange
wx.chooseAddress
wx.choosePoi
wx.chooseLocation
wx.startLocationUpdate
wx.startLocationUpdateBackground
需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请;
2、app.json配置
例如
{
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"chooseAddress",
"choosePoi",
]
}
相关公告 :地理位置接口新增与相关流程调整
参考
微信小程序–获取地理位置名称
版权声明:本文标题:微信小程序uniapp:通过腾讯地图获取用户地理位置信息及其行政区域代码 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725784922a1042571.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论