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

admin管理员组

文章数量:1530846

文档：

• 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",
  	]
}

相关公告 ：地理位置接口新增与相关流程调整

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

本文标签： 腾讯行政区域地理位置代码地图