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

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

一、获取接口权限

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


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获取大致位置信息

目录
打赏
0
0
0
0
58
分享
相关文章
代码让微信开屏地球转起来
这段内容介绍了如何使用Python制作一个动态旋转的地球图像,类似于微信启动画面中的地球。文章详细描述了所需准备的三个素材(地球表面、云图和微信地球的抠图),并解释了通过调整云层和地面的旋转速度来实现自然的相对运动效果的基本原理。文中还提供了一个GIF压缩工具的链接,以及部分代码示例。此外,文章最后提到了一些Python学习资源,包括学习路线、开发工具、视频教程、实战案例、练习题和面试资料。
56 0
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
77 0
小程序代码丢失!反编译找回
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
85 1
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
143 2
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
12 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
68 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等