<think>我们参考多个引用，总结在uniapp中通过经纬度获取当前城市的方法：
根据引用[1]：在App端，uni.getLocation方法在传入geocode:true参数时，可以直接返回地址信息（包括城市）。
根据引用[2][3][4][5]：在小程序、H5等平台，uni.getLocation通常只能获取经纬度，需要借助第三方地图服务（如高德、腾讯）进行逆地理编码（根据经纬度解析出地址信息）来获取城市。
因此，实现方案分为两种情况：
1. 如果是App端，可以直接使用uni.getLocation并设置geocode:true，从返回结果中获取城市。
2. 如果是其他平台（如小程序、H5），则需要：
a. 使用uni.getLocation获取经纬度。
b. 使用第三方地图服务（如高德地图、腾讯地图）的逆地理编码API，传入经纬度和密钥（key）来获取地址信息（包含城市）。
下面给出具体实现步骤和代码示例：
### 一、App端获取当前城市
在App端，我们可以直接调用uni.getLocation，设置geocode为true，然后在success回调中获取城市。
示例代码（条件编译，仅App端）：
```javascript
// #ifdef APP-PLUS
uni.getLocation({
type: 'gcj02', // 坐标系类型，可以是wgs84或gcj02，国内常用gcj02（高德、腾讯等）
geocode: true, // 是否解析地址信息，App端有效
success: (res) => {
console.log('定位信息：', res);
// 从返回的address中获取城市
if (res.address) {
let city = res.address.city; // 城市名称
// 注意：返回的city可能包含“市”字，如“北京市”，根据需求处理
console.log('当前城市：', city);
// 存储城市信息
this.city = city;
}
},
fail: (err) => {
console.error('获取定位失败：', err);
uni.showToast({ title: '获取位置失败', icon: 'none' });
}
});
// #endif
```
### 二、非App端（如小程序、H5）获取当前城市
由于非App端uni.getLocation不返回地址信息，我们需要先获取经纬度，然后调用第三方地图服务API。
步骤：
1. 获取用户授权（如果在小程序中，需要先调用uni.authorize申请授权）。
2. 调用uni.getLocation获取经纬度。
3. 使用获取的经纬度，调用地图服务的逆地理编码API（如高德地图、腾讯地图）。
以腾讯地图为例（需要申请key）：
```javascript
// 假设已经授权，获取经纬度
uni.getLocation({
type: 'gcj02', // 推荐使用gcj02，国内坐标
success: (res) => {
console.log('经纬度：', res.latitude, res.longitude);
// 调用腾讯地图逆地理编码API
let location = `${res.latitude},${res.longitude}`;
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
location: location,
key: '你的腾讯地图key', // 必须替换为真实key
output: 'json'
},
success: (res2) => {
if (res2.data.status === 0) {
let address = res2.data.result.address_component;
let city = address.city; // 获取城市
console.log('当前城市：', city);
// 存储城市信息
this.city = city;
} else {
uni.showToast({ title: '获取地址信息失败', icon: 'none' });
}
},
fail: (err2) => {
uni.showToast({ title: '请求地图服务失败', icon: 'none' });
}
});
},
fail: (err) => {
uni.showToast({ title: '获取位置失败', icon: 'none' });
}
});
```
注意：在小程序中使用腾讯地图服务，需要将域名`https://apis.map.qq.com`添加到小程序后台的request合法域名中。
同样，也可以使用高德地图的逆地理编码API，用法类似，需要申请高德的key，并配置安全域名（小程序需要）。
高德地图API示例（Web服务API）：
```javascript
uni.getLocation({
type: 'gcj02',
success: (res) => {
uni.request({
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: '你的高德地图key',
location: `${res.longitude},${res.latitude}`, // 高德要求经度在前，纬度在后
output: 'json'
},
success: (res2) => {
if (res2.data.status === '1') {
let address = res2.data.regeocode.addressComponent;
let city = address.city; // 城市
// 注意：高德返回的city可能是空（如直辖市），则用province
if (!city) {
city = address.province;
}
console.log('当前城市：', city);
this.city = city;
}
}
});
}
});
```
注意：高德地图的逆地理编码API中，location参数的格式是经度,纬度。
### 三、跨平台兼容写法
为了同时兼容App端和非App端，我们可以使用条件编译：
```javascript
// #ifdef APP-PLUS
// App端直接获取
uni.getLocation({
type: 'gcj02',
geocode: true,
success: (res) => {
this.processCity(res.address.city);
},
fail: (err) => {
this.handleError(err);
}
});
// #endif
// #ifndef APP-PLUS
// 非App端调用第三方API
uni.getLocation({
type: 'gcj02',
success: (res) => {
// 调用腾讯地图API（示例）
this.requestCityFromTencent(res.latitude, res.longitude);
},
fail: (err) => {
this.handleError(err);
}
});
// #endif
```
然后在methods中定义处理城市的方法和请求第三方API的方法。
注意：第三方地图API的调用可能会涉及跨域问题，在H5端需要后端代理或地图服务支持跨域（如JSONP），但uni-app的uni.request不支持JSONP，在小程序端则没有跨域问题。H5端可以使用jsonp方式，但uni.request不支持，可以使用第三方jsonp插件，或者使用高德地图的jsonp接口（在script标记中引入）。不过，H5端也可以使用uni-app的云端环境（如uniCloud）来转发请求规避跨域。
总结：
- App端：直接使用geocode参数解析地址。
- 小程序/H5端：使用第三方地图服务API（腾讯地图、高德地图）进行逆地理编码获取城市。
注意事项：
1. 使用第三方地图服务需要申请key，并注意配额和安全性（不要将key暴露在前端，如果无法避免，应设置域名白名单限制）。
2. 在小程序端调用第三方API需要配置合法域名。
3. 获取定位需要用户授权，因此需要处理授权失败的情况。
§§相关问题§§
1. 如何在小程序中配置地图服务的request合法域名？
2. 如何申请腾讯地图或高德地图的key？
3. 如何解决H5端调用地图API的跨域问题？
4. 在获取定位时，如何处理用户拒绝授权的情况？
</think>在 UniApp 中通过经纬度获取当前城市，主要有两种实现方式：**原生方式（仅限 App 端）** 和 **第三方地图 API 方式（全平台通用）**。以下是详细实现方法：
---
### 一、原生方式（仅限 App 端）
通过 `uni.getLocation` 的 `geocode` 参数直接解析地址信息：
```javascript
// #ifdef APP-PLUS
uni.getLocation({
type: 'gcj02', // 坐标系类型（国内需用 gcj02）
geocode: true, // 关键参数：开启地址解析
success: (res) => {
console.log(res.address.city); // 直接获取城市名（如"北京市"）
console.log(res.address.district); // 获取区县名
},
fail: (err) => {
console.error("定位失败", err);
}
});
// #endif
```
**特点**：
- ✅ 简单直接，无需额外 API 调用
- ❌ **仅支持 App 端**（H5/小程序无效）
- 返回字段参考：
```json
{
"address": {
"city": "北京市",
"district": "海淀区",
"province": "北京市"
},
"latitude": 39.909023,
"longitude": 116.397428
}
```
---
### 二、第三方地图 API 方式（全平台通用）
通过 `uni.getLocation` 获取经纬度后，调用**高德/腾讯地图的逆地理编码 API** 解析城市：
#### 1. 高德地图实现：
```javascript
// 获取经纬度
uni.getLocation({
type: 'wgs84',
success: (res) => {
const { longitude, latitude } = res;
// 调用高德逆地理编码 API
uni.request({
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: '你的高德API_KEY', // 需申请
location: `${longitude},${latitude}` // 经度在前
},
success: (res) => {
const city = res.data.regeocode.addressComponent.city;
console.log("当前城市：", city); // 如"北京市"
}
});
}
});
```
#### 2. 腾讯地图实现：
```javascript
uni.getLocation({
type: 'gcj02',
success: (res) => {
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
key: '你的腾讯API_KEY',
location: `${res.latitude},${res.longitude}` // 纬度在前
},
success: (res) => {
const city = res.data.result.address_component.city;
console.log("当前城市：", city);
}
});
}
});
```
**关键配置**：
1. 申请地图服务密钥：
- 高德地图：登录[高德开放平台](https://lbs.amap.com/)创建 Web 服务 Key
- 腾讯地图：登录[腾讯位置服务](https://lbs.qq.com/)创建 Key
2. 域名白名单（小程序必备）：
- 在微信小程序后台配置 `request` 合法域名：
```
https://restapi.amap.com（高德）
https://apis.map.qq.com（腾讯）
```
---
### 三、注意事项
1. **用户授权**：
首次调用需申请定位权限（小程序需 `scope.userLocation`），建议添加授权引导：
```javascript
uni.authorize({
scope: 'scope.userLocation',
success: () => { /* 执行定位 */ },
fail: () => { uni.showToast({ title: "请授权定位权限" }) }
});
```
2. **坐标系差异**：
- 高德/腾讯使用 `GCJ-02`（火星坐标系）
- GPS 原始数据为 `WGS-84`，需根据 API 要求转换
3. **直辖市处理**：
部分城市（如北京）返回的 `city` 字段可能为空，需用 `province` 替代：
```javascript
const city = res.city || res.province;
```
---
本文介绍了如何在uni-app中集成腾讯地图SDK，包括申请开发者密钥、导入SDK、获取经纬度和解析地址。同时展示了利用腾讯地图API计算两个经纬度之间的距离。在遇到定位失败的问题时，提供了在manifest.json中添加权限的解决方案。
最低0.47元/天 解锁文章
扫一扫
8763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
