微信jssdk接口--wx.getLocation接口的使用时踩的坑

本文详细介绍了微信地理位置接口的使用方法,包括正确配置、参数设置、返回结果解析及常见问题解决。重点讨论了地理位置坐标类型转换及与第三方地图服务的对接,以及在不同平台(网页端与移动端)上应用的差异。

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

首先微信jssdk接口的使用过程都需要正确的配置,否则无法成功调用的。配置过程,改天再总结,现在只说说地理位置的接口。

具体接口调用代码

wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});

参数type:当我们需要使用第三方地图服务时就需要正确配置这个参数了。先来看这个参数的可选值:wgs84和gcj02,百度一下这两个类型,不难理解,它其实就是实际地理位置的经纬度通过这两种类型的转换算法得到一个新的经纬度,这个经纬度就被用来公开显示。

        我们在网上或者gps等获取到的地理位置都是一个经纬度值,这个经纬度值与真实地理位置的经纬度是不一样的。这两种经纬度之间的换算就是用了某种算法。比如火星坐标指的就是实际坐标经过GCJ02算法得到的坐标,而百度坐标则是BD09,还有WGS84坐标,同理。这些算法肯定是不公开的。

我踩的第一个大坑就是这个类型设置错了!!!

这个接口最后返回的结果是一个包含了经纬度的对象,这个经纬度也就是我们的目标,获取到经纬度以后就需要通过地图服务提供的地址解析接口来获取地址。一开始选用了腾讯地理位置服务的JavaScript API中提供的qq.maps.Geocoder 类 里getAddress()接口,产生了问题:在电脑上调试可以得到精确的地址,在手机上则是死活无法显示街道巷号门牌号的具体信息。了解后知道了,这个API主要用于网页地图的开发,针对手机客户端的地理位置服务需要使用WebService API里的地址解析接口。具体用法可以在WebService API查阅。在用这个解决方案的时候也遇到了问题,就是调用这个接口会返回errMsg“不支持该方法的使用”之类的具体不太记得了,如果遇到这个问题,那就是数据类型的问题,这个接口返回的是jsonp类型,但是文档上写的又是默认json格式,反复尝试只有设置为jsonp才能请求成功,当我们设置了dataType:'jsonp',请求的参数里就要显示设置output='jsonp'了.至于为什么我也不清楚,只能是给大家提供一种解决方案。

这是第二个大坑了,地理位置服务的选用以及请求参数和返回格式的设置。

小结:

当遇到该接口的调用失败问题,按以下步骤检测:

(1)wx.config配置成功没有

(2)type类型与后面选用的第三方地理位置服务的坐标系是否一致。比如type='WGS84',得到的坐标放进以BD09为坐标系的百度地图中去处理,那得到的结果肯定是不对的

(3)你所选用的API是否针对应用的平台,网页端的产品用到移动端肯定不精准的。

### 集成并使用 `qqmap-wx-jssdk.min.js` 的方法 要在垃圾分类小程序中集成并使用 `qqmap-wx-jssdk.min.js`,可以按照以下方式进行操作: #### 1. 引入 JS 文件 在需要使用位置服务的 `.vue` 或其他页面文件中引入 `qqmap-wx-jssdk.min.js` 文件。假设该文件存储路径为 `/static/js/qqmap-wx-jssdk.min.js`,则可以在页面顶部通过如下代码完成引入: ```javascript import QQMapWX from '@/static/js/qqmap-wx-jssdk.min.js'; ``` 此部分需注意文件的实际路径以及导出方式是否正确[^3]。 #### 2. 初始化 SDK 对象 初始化 `QQMapWX` 类实例,需要传入开发者申请的密钥(Key)。以下是具体的实现代码片段: ```javascript data() { return { qqMapSdk: null, }; }, created() { this.qqMapSdk = new QQMapWX({ key: '你的腾讯地图 API Key' }); } ``` #### 3. 获取当前地理位置 调用微信原生接口 `wx.getLocation()` 来获取用户的经纬度坐标,并将其传递给反向地理编码函数 `reverseGeocoder` 进行地址解析。具体实例如下: ```javascript methods: { getCurLocation() { const self = this; wx.getLocation({ type: 'gcj02', // 使用国测局加密算法 success(res) { const { latitude, longitude } = res; self.qqMapSdk.reverseGeocoder({ location: { latitude, longitude }, success(result) { console.log('当前位置信息:', result); // 可在此处处理返回的位置数据 }, fail(err) { console.error('反向地理编码失败:', err); } }); }, fail(err) { console.error('获取位置失败:', err); } }); } } ``` #### 4. 地图组件配置 为了展示地图界面,在 WXML 中定义 `<map>` 组件及其属性绑定逻辑。下面是一个简单的例子: ```html <view class="page-box"> <map id="citymap" name="citymap" :longitude="longitude" :latitude="latitude" :polyline="polyline" :markers="markers" :scale="scale" style="width: 100%; height: 100%;" show-location> </map> <!-- 添加覆盖层 --> <cover-view class="map-search-view" @tap="toMapSearch"> <cover-image class="map-img-search" src="/images/search_icon.png"></cover-image> </cover-view> </view> ``` 其中,`:longitude`, `:latitude`, 和其他动态参数应由 Vue 数据模型提供支持[^2]。 --- ### 注意事项 - **API 密钥的有效性**:确保使用的 Key 已经激活并且具备相应的权限。 - **环境兼容性测试**:由于不同平台可能对插件的支持程度有所差异,请务必分别验证 Android 和 iOS 下的功能表现。 - **错误排查技巧**:当遇到诸如模块未找到等问题,除了确认路径无误外,还需检查实际导出形式是否一致。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值