H5地理定位获取用户当前位置、城市

第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create

配置信息

申请配置成功以后返回一个AK

第二步:引入百度地图的js脚本,地址为http://api.map.baidu.com/api?v=2.0&ak=(申请应用的AK)

第三步:通过BMap.Geolocation()和getCurrentPosition(function(){})函数进行定位操作,代码如下图

//获取当前城市
            var geolocation=new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus()==BMAP_STATUS_SUCCESS){
                    var lat=r.address.lat//当前经度
                    var lng=r.address.lng//当前纬度
                    var province=r.address.province //返回当前省份
                    var city=r.address.city//返回当前城市
                    console.log(city)
                    $('.cityName').text(city)
                }
            })

 

转载于:https://www.cnblogs.com/xxflz/p/10406763.html

### 实现 UniApp 中获取用户当前定位城市 在 UniApp 应用程序中,可以通过调用浏览器内置的地理定位 API 来获取用户当前位置信息,包括经纬度以及所在的城市名称。此过程无需额外安装 SDK 即可在 H5 平台上运行[^1]。 #### 使用 Geolocation API 获取位置数据 为了简化操作流程并将功能封装成易于使用的组件形式,下面提供了一个简单的 JavaScript 方法来请求地理位置: ```javascript export function getUserLocation() { return new Promise((resolve, reject) => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( position => resolve(position), error => reject(error) ); } else { reject('Geolocation is not supported by this browser.'); } }); } ``` 该函数返回一个 `Promise` 对象,当成功接收到位置信息时会解析出包含纬度 (`coords.latitude`) 和经度 (`coords.longitude`) 的对象;如果失败则捕获错误并传递给拒绝处理程序。 #### 调用第三方服务转换为具体地址描述 仅靠上述方法只能获得坐标值,要得到具体的省市县等行政区划详情,则需借助外部的地图服务商接口,比如高德地图提供的逆地理编码服务。首先应按照官方文档指引注册账号并创建应用以取得合法访问密钥[^3]。 接着可以在项目中的适当位置发起 HTTP 请求发送已知坐标准确查询对应的文字说明: ```javascript async function getCityNameByCoordinates(latlng) { const { latitude, longitude } = latlng; try { let response = await uni.request({ url: 'https://restapi.amap.com/v3/geocode/regeo', method: 'GET', data: { key: YOUR_AMAP_API_KEY, location: `${longitude},${latitude}`, extensions: 'all' } }); console.log(response); // 解析响应体内的 regeocode 地址成分 if (response.statusCode === 200 && response.data.status === '1') { var addressComponent = response.data.regeocode.addressComponent; return `${addressComponent.province}${addressComponent.city || ''}`; } throw new Error('Failed to fetch city name'); } catch (error) { console.error(`Error fetching city name: ${error.message}`); return null; } } ``` 请注意替换模板字符串中的 `YOUR_AMAP_API_KEY` 为你实际拥有的有效 API 密钥。 通过组合这两个部分的功能即可实现在 UniApp 程序里快速而准确地确定用户所处的具体城市区域,并将其应用于各种场景之中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值