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

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

一、获取接口权限

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


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、微信小程序后台添加安全域名: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获取大致位置信息

相关文章
|
消息中间件 缓存 小程序
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
929 8
|
12月前
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
640 0
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
1055 0
小程序代码丢失!反编译找回
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
443 2
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
1414 12
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识:基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
837 0
微信小程序开发必备前置知识:基本代码构成与语法
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
223 2
|
小程序 JavaScript 安全
微信小程序实现云闪付支付(代码和注释很详细)
微信小程序实现云闪付支付(代码和注释很详细)
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的招聘信息推荐系统附带文章源码部署视频讲解等
210 0