共计 3481 个字符，预计需要花费 9 分钟才能阅读完成。
很长时间以来，为了图省事，我都是直接抄的微信 公众号 开发的 demo 代码，下载页面如下：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html# 附录 6 -DEMO 页面和示例代码
或者直接看官方在线的示例：
https://www.weixinsxy.com/jssdk/#menu-location
通过开发者工具打开上方的链接，点击openLocation
从控制台可以看到，点击后，页面进行了回应，返回了坐标、名称、地址以及缩放等级。
查看 demo.js，可以看到官方给的操作方法是：
JavaScript
|
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’
});
};
|
于是乎，我很长一段时间，都在抄官方的这个示例代码，形式如下：
JavaScript
|
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 会出现这样的问题呢？
仔细看了一下代码，分享代码是这样写的：
JavaScript
|
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 这样写：
JavaScript
|
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 后刷新页面，搞定。
