腾讯刚开放的 获取当前的地理位置,速度接口

其实也容易申请,就是得多试几次。

### 如何在 UniApp H5 端 使用 腾讯地图 API 获取 当前地理位置 #### 准备工作 为了能够在 UniApp 的 H5 端使用腾讯地图 API 来获取用户的当前位置,首先需要完成一些准备工作。 确保已经在腾讯地图开放平台上注册并创建应用,获得相应的 `Key` 值。此 Key 将用于调用腾讯地图的相关接口[^1]。 #### 配置环境 接下来,在项目的根目录下的 `manifest.json` 文件中的 `"app-plus"` 字段里加入如下配置: ```json { "usingComponents": {}, "appid": "", // 如果有则填写小程序 AppID ... } ``` 对于 H5 平台来说,这部分配置可能并不是必需的,因为主要依赖于前端 JavaScript SDK 进行交互[^3]。 #### 引入腾讯地图 JS API 可以在页面组件内的 `<script>` 标签之前添加对腾讯地图 Web Service Javascript SDK 的引用链接: ```html <script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&key=您的KEY"></script> ``` 这里的 `v=2.exp` 表示使用的版本号,而 `key=您的KEY` 则是要替换为自己申请到的那个密钥字符串[^5]。 #### 编写代码逻辑 下面是一个简单的例子来展示如何利用上述准备好的资源去请求用户的位置信息,并将其显示出来。 定义一个 Vue 组件方法用来发起定位请求: ```javascript export default { data() { return { show: false, pos_name: '', latitude: '', longitude: '', address: '' } }, mounted(){ this.getAddress(); }, methods: { getAddress() { const that = this; qqmapsdk = new QQMapWX({ key: '您自己的 KEY' }); wx.getLocation({ type: 'wgs84', success(res) { var location = { latitude: res.latitude, longitude: res.longitude }; qqmapsdk.reverseGeocoder({ location, success(addressRes){ console.log('成功',addressRes); that.pos_name = addressRes.result.address_component.city || ''; that.latitude = res.latitude; that.longitude = res.longitude; that.address = addressRes.result.formatted_addresses.recommend; that.show=true; }, fail(err){ console.error('失败',err); } }) }, fail(error){ console.error('getLocation failed:', error); } }); } } }; ``` 这段代码展示了怎样通过 `wx.getLocation()` 方法取得设备所在地点的具体坐标数据 (经度和纬度),然后再借助 `reverseGeocoder()` 接口转换成可读性强的人类语言描述形式——即完整的地址详情。 需要注意的是,这里假设是在微信浏览器环境下运行;如果是纯 HTML5 页面,则应考虑采用其他方式如 navigator.geolocation 或者直接调用腾讯地图提供的相应函数来进行地理定位操作[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值