uni-app定位没有显示详细地址,只有一个经纬度

发布于 1周前 作者 eggper 来自 Uni-App

uni-app定位没有显示详细地址,只有一个经纬度

1 回复

在uni-app中实现获取详细地址的功能,除了获取经纬度之外,还需要通过调用地图服务API(如高德地图、百度地图等)进行逆地理编码,将经纬度转换为具体的地址信息。以下是一个使用高德地图API实现这一功能的代码案例。

首先,你需要在高德地图开放平台申请一个API Key,并将其配置在你的项目中。

  1. 安装高德地图SDK(如果还未安装)

    manifest.json中配置高德地图的SDK:

    "mp-weixin": {
        "appid": "YOUR_APPID",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true,
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于小程序定位"
            }
        },
        "sdkConfigs": {
            "amap": {
                "version": "1.4.15", // 确保使用最新版本
                "key": "YOUR_AMAP_KEY"
            }
        }
    }
    
  2. 获取经纬度和逆地理编码

    在页面的JavaScript文件中,编写以下代码:

    import amapFile from '@/static/amap-wx.js'; // 高德地图SDK文件路径,需自行下载并放置到项目中
    
    export default {
        data() {
            return {
                latitude: 0,
                longitude: 0,
                address: ''
            };
        },
        methods: {
            getLocation() {
                const that = this;
                wx.getLocation({
                    type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
                    success(res) {
                        that.latitude = res.latitude;
                        that.longitude = res.longitude;
                        that.reverseGeocode(res.latitude, res.longitude);
                    }
                });
            },
            reverseGeocode(latitude, longitude) {
                const that = this;
                wx.request({
                    url: `https://restapi.amap.com/v3/geocode/regeo?key=YOUR_AMAP_KEY&location=${latitude},${longitude}&output=json`,
                    success(res) {
                        if (res.data && res.data.regeocode && res.data.regeocode.formattedAddress) {
                            that.address = res.data.regeocode.formattedAddress;
                        } else {
                            console.error('获取地址失败', res.data);
                        }
                    },
                    fail(err) {
                        console.error('请求失败', err);
                    }
                });
            }
        },
        onLoad() {
            this.getLocation();
        }
    };
    
  3. 在页面中显示地址

    在页面的模板文件中,使用以下代码显示获取到的地址:

    <view>
        <text>经度: {{ longitude }}</text>
        <text>纬度: {{ latitude }}</text>
        <text>详细地址: {{ address }}</text>
    </view>
    

确保你已经正确配置了高德地图的API Key,并且已经下载了高德地图的SDK文件(amap-wx.js)并放置到了项目的静态资源目录中。这样,当用户打开页面时,就会请求定位权限,获取经纬度,并通过高德地图API获取详细地址。

回到顶部