很长时间以来，为了图省事，我都是直接抄的微信公众号开发的demo代码，下载页面如下：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#附录6-DEMO页面和示例代码
或者直接看官方在线的示例：
通过开发者工具打开上方的链接，点击openLocation
从控制台可以看到，点击后，页面进行了回应，返回了坐标、名称、地址以及缩放等级。
查看demo.js，可以看到官方给的操作方法是：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 7 地理位置接口 // 7.1 查看地理位置 document.querySelector('#openLocation').onclick = function () { wx.openLocation({ latitude: 23.099994, longitude: 113.324520, name: 'TIT 创意园', address: '广州市海珠区新港中路 397 号', scale: 14, infoUrl: 'http://weixin.qq.com' }); }; |
于是乎，我很长一段时间，都在抄官方的这个示例代码，形式如下：
|
1 2 3 4 5 6 7 8 9 10 |
$('#xinduhui_navigator').click(function(){ wx.openLocation({ latitude: 26.601366, longitude: 106.618302, name: '万科·新都荟', address: '贵州省贵阳市观山湖区观山湖区印象城迪卡侬旁', scale: 14, infoUrl: 'http://vanke.gyxlck.com/jiqun/index.php' }); }); |
出现了问题
通过jQuery点击事件，调用wx.openLocation，看起来是没有问题的，但是在实际使用过程中，我发现有时候，点击是无响应的。
- 如果要复现这个情况的话可以这样操作：
- 从调用wx.openLocation地图的页面离开
- 再返回wx.openLocation地图页面
- 点击wx.openLocation按键
- 无响应
起初我把这个当一个偶然事件，我甚至以为这是Vue渲染页面造成的副作用……
直到最近做了多级页面批量调用之后，这个现象普遍到无法时候之后，我发现我错了。
问题根源
同样是微信SDK，从其他页面返回的时候，为什么微信分享这些不受影响，偏偏wx.openLocation会出现这样的问题呢？
仔细看了一下代码，分享代码是这样写的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
wx.ready(function () { wx.updateAppMessageShareData({ title: '万科商业集群 掘金贵阳财富', desc: '城央热力资产 全城热售', link: 'http://vanke.gyxlck.com/jiqun/index.php', imgUrl: 'http://vanke.gyxlck.com/static/img/jiqun/share_logo.jpg', success: function () { // 设置成功 } }); }); wx.ready(function () { wx.updateTimelineShareData({ title: '万科商业集群 掘金贵阳财富', link: 'http://vanke.gyxlck.com/jiqun/index.php', imgUrl: 'http://vanke.gyxlck.com/static/img/jiqun/share_logo.jpg', success: function () { // 设置成功 } }); }); |
仔细一看，再结合wx.openLocation返回后不能点击的情况，果然，代码有问题。
分享的代码，我是用了wx.ready，而wx.openLocation没有，直接就是一个点击事件。
恍然，疏忽了，补上之后wx.openLocation这样写：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ $('#tianjiao_navigator').click(function(){ wx.openLocation({ latitude: 26.636253, longitude: 106.619929, name: '万科·翡翠天骄', address: '贵州省贵阳市观山湖区碧海南路与观山西路交叉口西北方向30米', scale: 14, infoUrl: 'http://vanke.gyxlck.com/jiqun/index.php' }); }); }); |
页面加载完毕后再执行点击事件，就没有问题。
开启debug后刷新页面，搞定。
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/9923
微信扫一扫 
支付宝扫一扫 
