uniapp APP&H5端获取地理位置信息（百度地图&高德地图）

最新推荐文章于 2025-06-26 14:52:33 发布

m0_67401499

最新推荐文章于 2025-06-26 14:52:33 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： android 百度 vue.js

本文链接：https://blog.youkuaiyun.com/m0_67401499/article/details/123352895

本文介绍了在uniapp中，如何在APP和H5端获取地理位置信息，针对H5端，分别阐述了使用高德地图API（无跨域问题）和百度地图API（通过jsonp解决跨域问题）的步骤，包括申请key、配置和集成。

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

APP&H5端获取地理位置信息

一、app端

1.在需要使用的页面中

onShow(){
    //#ifdef APP-PLUS
    // 获取定位信息
	this.getLocations();
    //#endif
},
methods：{
	//获取定位信息
	getPosition(){
        const that = this;
        uni.getLocation({
            type: 'wgs84',
            geocode:true,//设置该参数为true可直接获取经纬度及城市信息
            success: function (res) {
                console.log('获取定位信息',res);
                that.latitude = res.latitude;
                that.longitude =  res.longitude;
                that.area = res.address.city;
            },
            fail: function (err) {
                console.log("获取定位失败",err);
                uni.showToast({
                    title: '获取地址失败，将导致部分功能不可用',
                    icon:'none'
                });
            }
        });
	
	}
}

2.在高德地图或百度地图开放平台申请key

高德地图开放平台 https://console.amap.com/dev/key/a