微信小程序/uniapp：通过腾讯地图获取用户地理位置信息及其行政区域代码

文档：

• wx.getLocation(Object object) 获取当前的地理位置、速度
• 腾讯位置服务 微信小程序JavaScript SDK

一、获取接口权限

根据腾讯地图文档需要完成以下几个步骤：

1、创建应用： https://lbs.qq.com/dev/console/application/mine

• 申请开发者密钥（key）
• 填写微信小程序授权 APP ID
• 勾选WebserviceAPI 域名白名单

2、下载微信小程序JavaScriptSDK（如果地址失效请到官网下载）

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
解压后放在目录

libs/qqmap-wx-jssdk.js

3、微信小程序后台添加安全域名

重要 如果不添加request合法域名，测试版本正常，线上版本会获取不到数据

request合法域名	    https://apis.map.qq.com

二、使用

单独提取出功能函数 utils/qq-map.js

/*** 腾讯地图 微信小程序JS API* https://lbs.qq.com/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开发环境中，发现有跨域问题，我采用的方式是服务端调用腾讯地图的接口，再将数据返回给前端使用

前端  <-> 腾讯地图改为：前端 <-> 服务端 <-> 腾讯地图

参考
微信小程序–获取地理位置名称

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！