微信小程序获取当前所在城市
封面图
•
2025-10-11
•
小程序
200
0
0
0
在微信小程序中,可以通过 `wx.getLocation` 接口获取用户的当前位置(包括经纬度),然后通过第三方地图 API(如高德地图、百度地图或腾讯地图)将经纬度转换为城市信息。 下面是一个完整的实现步骤和示例代码: --- ### ✅ 一、获取用户当前经纬度 ```javascript wx.getLocation({ type: 'wgs84', // 默认使用GPS坐标系 success: function (res) { const latitude = res.latitude; const longitude = res.longitude; // 调用地图API获取城市信息 wx.request({ url: 'https://restapi.amap.com/v3/geocode/reverse', data: { key: '你的高德地图API密钥', location: `${longitude},${latitude}` }, success: function (res) { const city = res.data.regeocode.city; console.log('当前所在城市:', city); } }); }, fail: function () { console.error('获取位置失败'); } }); ``` --- ### 📍 二、获取高德地图 API 密钥 1. 登录 [高德开放平台](https://lbs.amap.com/) 2. 创建应用,获取 **Key** 3. 在请求中替换 `你的高德地图API密钥` > ⚠️ 注意:高德地图的 `reverse geocode` 接口需要申请权限,并且有调用次数限制。 --- ### 🌐 三、其他地图服务(可选) 如果你不想使用高德地图,也可以使用其他地图服务,例如: #### 百度地图(Baidu Map): ```http https://api.map.baidu.com/reverse_geocoding/v3/?ak=你的百度密钥&location=纬度,经度 ``` #### 腾讯地图(Tencent Map): ```http https://apis.map.qq.com/ws/geocoder/v1/?key=你的腾讯密钥&location=纬度,经度 ``` --- ### 📌 四、注意事项 - 用户需要授权地理位置权限(`wx.authorize`) - 需要配置小程序的 `privacy` 合规内容(如需获取位置信息) - 不同地图 API 的返回格式略有不同,需要根据实际返回结构处理 --- ### ✅ 示例完整代码(带授权) ```javascript // pages/index/index.js Page({ data: { city: '' }, onLoad() { this.getCity(); }, getCity() { wx.authorize({ scope: 'scope.userLocation', success: () => { wx.getLocation({ type: 'wgs84', success: (res) => { const { latitude, longitude } = res; this.getAddressByLocation(latitude, longitude); }, fail: () => { console.error('定位失败'); } }); }, fail: () => { console.error('未授权位置权限'); } }); }, getAddressByLocation(lat, lng) { wx.request({ url: 'https://restapi.amap.com/v3/geocode/reverse', data: { key: '你的高德密钥', location: `${lng},${lat}` }, success: (res) => { const city = res.data.regeocode.city; this.setData({ city }); console.log('当前城市:', city); } }); } }); ``` --- 如果你有其他需求(比如不需要第三方 API,直接使用微信内置定位),可以告诉我,我可以提供更详细的方案。
上一篇:
微信小程序-合法域名校验出错
下一篇:
微信小程序 如何使用globalData
标题录入,一次不能超过6条
返回顶部
留言
留言
评论