【微信小程序】微信小程序获取经纬度+腾讯地图api小程序经纬度逆向解析详细位置方法

这篇博客介绍了如何通过腾讯地图开放平台创建应用,并利用JavaScript SDK获取用户位置信息。详细步骤包括注册、新建应用、添加权限以及调用逆地址解析接口。成功获取经纬度后,使用wx.request发送请求到腾讯地图接口,解析得到详细地址信息,包括国家、省、市、区等。同时,博客还列出了返回数据的结构,方便开发者理解和使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、注册腾讯地图开放平台(省略步骤)

https://lbs.qq.com/

2.在控制台新建应用
请添加图片描述
3.添加信息
请添加图片描述
4.app.josn添加下面代码

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于自动填写位置信息处"
    }
  },

5.业务逻辑

  created() {
    // 获取当前的经纬度坐标
    wx.getLocation({
        success(res) {
            // 纬度
            const latitude = res.latitude
            // 经度
            const longitude = res.longitude
            // 请求腾讯地图逆地址解析接口
            wx.request({
                url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=QTABZ-ENBKI-6HGGF-5KNXZ-LG3YZ-IABGX`,
                success(res) {
                    console.log(res)
                }
            })
        }
    })
},

7.res数据参考官方文档

https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
名称	类型	必填	说明
status	number	是	状态码,0为正常,其它为异常,详细请参阅状态码说明
message	string	是	状态说明
request_id	string	是	本次请求的唯一标识
result	object	是	逆地址解析结果
address	string	是	以行政区划+道路+门牌号等信息组成的标准格式化地址
formatted_addresses	object	否	结合知名地点形成的描述性地址,更具人性化特点
recommend	string	否	推荐使用的地址描述,描述精确性较高
rough	string	否	粗略位置描述
address_component	object	是	地址部件,address不满足需求时可自行拼接
nation	string	是	国家
province	string	是	省
city	string	是	市,如果当前城市为省直辖县级区划,city与district字段均会返回此城市
注:省直辖县级区划adcode第3和第4位分别为90,如济源市adcode为419001
district	string	否	区,可能为空字串
street	string	否	街道,可能为空字串
street_number	string	否	门牌,可能为空字串
ad_info	object	是	行政区划信息
nation_code	string	是	国家代码(ISO3166标准3位数字码)
adcode	string	是	行政区划代码,规则详见:行政区划代码说明
city_code	string	是	城市代码,由国家码+行政区划代码(提出城市级别)组合而来,总共为9位
name	string	是	行政区划名称
location	object	是	行政区划中心点坐标
lat	number	是	纬度
lng	number	是	经度
nation	string	是	国家
province	string	是	省 / 直辖市
city	string	是	市 / 地级区 及同级行政区划,如果当前城市为省直辖县级区划,city与district字段均会返回此城市
注:省直辖县级区划adcode第3和第4位分别为90,如济源市adcode为419001
district	string	否	区 / 县级市 及同级行政区划
address_reference	object	否	坐标相对位置参考
famous_area	object	否	知名区域,如商圈或人们普遍认为有较高知名度的区域
id	string	是	地点唯一标识
title	string	否	名称/标题
location	object	否	坐标
lat	number	否	纬度
lng	number	否	经度
_distance	number	否	此参考位置到输入坐标的直线距离
_dir_desc	string	否	此参考位置到输入坐标的方位关系,如:北、南、内
business_area	object	否	商圈,目前与famous_area一致
town	object	否	乡镇街道
id	string	是	地点唯一标识
title	string	否	名称/标题
location	object	否	坐标
lat	number	否	纬度
lng	number	否	经度
_distance	number	否	此参考位置到输入坐标的直线距离
_dir_desc	string	否	此参考位置到输入坐标的方位关系,如:北、南、内
landmark_l1	object	否	一级地标,可识别性较强、规模较大的地点、小区等
【注】对象结构同 famous_area
landmark_l2	object	否	二级地标,较一级地标更为精确,规模更小
【注】:对象结构同 famous_area
street	object	否	街道 【注】:对象结构同 famous_area
street_number	object	否	门牌 【注】:对象结构同 famous_area
crossroad	object	否	交叉路口 【注】:对象结构同 famous_area
water	object	否	水系 【注】:对象结构同 famous_area
poi_count	number		查询的周边poi的总数,仅在传入参数get_poi=1时返回
pois	array	否	周边地点(POI)数组,数组中每个子项为一个POI对象
id	string	否	地点(POI)唯一标识
title	string	否	名称
address	string	否	地址
category	string	否	地点分类信息
location	object	否	提示所述位置坐标
lat	number	否	纬度
lng	number	否	经度
ad_info	object	否	行政区划信息
adcode	number	是	行政区划代码
province	string	是	省
city	string	是	市,如果当前城市为省直辖县级区划,city与district字段均会返回此城市
注:省直辖县级区划adcode第3和第4位分别为90,如济源市adcode为419001
district	string	是	区
_distance	number	否	该POI到逆地址解析传入的坐标的直线距离

### 微信小程序获取当前位置坐标并调用天气 API 的实现 #### 实现概述 在微信小程序中,可以通过 `wx.getLocation` 接口获取用户的经纬度信息[^1]。随后利用这些经纬度数据通过第三方天气服务提供商(如腾讯云、阿里云或其他开放平台)提供的天气 API 查询对应地区的实时天气情况。 以下是具体的技术细节和代码示例: --- #### 获取用户地理位置的实现方法 使用 `wx.getLocation` 方法获取用户的地理坐标(纬度和经度)。此接口返回的数据可以直接用于后续的地图定位或者逆向解析为具体的地址名称[^3]。 ```javascript // app.js 或者 page.js 中定义的方法 getLocation() { wx.getLocation({ type: 'gcj02', // 返回可以用于微信内置地图的坐标 success(res) { const latitude = res.latitude; const longitude = res.longitude; console.log('Latitude:', latitude, ', Longitude:', longitude); // 将经纬度传递给其他函数处理 getWeatherByLocation(latitude, longitude); }, fail(err) { console.error('Failed to get location:', err); } }); } ``` 上述代码片段展示了如何通过 `wx.getLocation` 来捕获用户的 GPS 数据,并将其作为输入参数传入到另一个自定义函数 `getWeatherByLocation()` 中进一步操作。 --- #### 使用逆地理编码将经纬度转为实际地址 如果希望展示更友好的界面提示,则还需要把原始的经纬度转化为人类可理解的城市名或街道级描述[^2]。这一步通常依赖于高德地图、百度地图或者其他支持此类功能的服务商所提供的 RESTful Web Service 完成转换过程。 下面是一个简单的例子演示怎样发送 HTTP 请求至某特定服务商完成这一任务: ```javascript reverseGeocode(lat, lng){ let url = `https://restapi.amap.com/v3/geocode/regeo?key=YOUR_API_KEY&location=${lng},${lat}`; wx.request({ url:url, method:'GET', header:{'content-type':'application/json'}, success:function(responseData){ var addressComponent=responseData.data.regeocode.addressComponent; console.log(`Current Position:${addressComponent.province}-${addressComponent.city}-${addressComponent.district}`); }, error:function(errorInfo){ console.warn("Error occurred during reverse geocoding",errorInfo); } }); } ``` 注意替换其中占位符 YOUR_API_KEY 成为你自己的开发者密钥才能正常使用该服务。 --- #### 调用天气预报 API 并显示结果 最后一步就是联系外部气象服务平台请求最新的气候状况更新。这里假设采用的是一个假想的支持 JSONP 格式的公共端点为例说明整个流程逻辑如下所示 : ```javascript function getWeatherByLocation(lat, lon){ const weatherUrl=`http://t.weather.sojson.com/api/weather/city/101010100?latitude=${lat}&longitude=${lon}`; wx.request({ url :weatherUrl , data :{} , header:{ "Content-Type":"application/x-www-form-urlencoded" }, success :(res)=>{ if (res.statusCode===200 && !res.errMsg ){ displayWeatherDetails(res.result.today.wea,res.result.temperature.now.tempC ); }else{ alertUserFailureToFetchWeather(); } }, failure:(err)=>{console.debug(err);} }) } displayWeatherDetails=(condition,temp)=>{ document.getElementById("currentCondition").innerText="Today's Condition:"+ condition ; document.getElementById("temperatureValue").innerText="Temperature is "+ temp +"° Celsius"; } alertUserFailureToFetchWeather=()=>{ wx.showToast({title:"Unable To Fetch Weather Data!",icon:"none"}); } ``` 以上脚本段落解释了当成功接收到服务器响应包之后应该采取哪些行动步骤去渲染 UI 组件上的文字标签内容;同时也包含了错误情形下的反馈机制设计思路供参考学习之用。 --- ### 注意事项 - **权限声明**: 需要在项目的 manifest 文件里添加必要的隐私政策同意条款告知最终使用者会收集其所在区域的相关资料以便提供更好的用户体验效果。 - **频率限制**: 大部分在线资源都有严格的访问次数上限规定,请务必查阅官方文档了解清楚后再合理安排好程序架构布局以免超出限额遭到封禁处罚风险。 - **安全性考量**: 对敏感个人信息做好加密保护措施防止泄露出去造成不必要的麻烦纠纷等问题发生几率最小化为目标努力前行不断优化改进现有解决方案直至达到理想状态为止! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡忘_cx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值