步骤
- 与服务端通信获取签名
- 配置jssdk
- 获取详细经纬度后反查腾讯地图得到确切地址
- 正则匹配已开通服务城市,匹配成功跳到具体城市
前提
先把需要的js文件引入,因为有时在断网情况下测试,所以我把js文件都下到本地。
http://map.qq.com/api/js?v=2.exp
https://res.wx.qq.com/open/js/jweixin-1.0.0.js
<script charset="utf-8" src='jweixin-1.0.0.js'></script>
<script charset="utf-8" src="qqmap.js"></script>
与服务端通信获取签名
Vue.http({
method: 'POST',
url: '/wechat/signature4customer',
headers: {
'Content-Type': 'application/json'
},
data: {
'url': encodeURIComponent(window.location.href.split('#')[0])
}
})
配置jssdk
let appId = response.data.appId
let timestamp = response.data.timestamp
let nonceStr = response.data.nonceStr
let signature = response.data.signature
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名,见附录1
jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
})
获取详细经纬度后反查腾讯地图得到确切地址
wx.ready(function () {
wx.getLocation({
type: 'wgs84',
success: function (res) {
// 地址解析:http://lbs.qq.com/javascript_v2/guide-service.html#link-four
let geocoder = new qq.maps.Geocoder({
complete: function (result) {
resolve(result.detail.address)
}
})
var coord = new qq.maps.LatLng(res.latitude, res.longitude)
geocoder.getAddress(coord)
}
})
})
正则匹配已开通服务城市,匹配成功跳到具体城市
wx.getLocation().then(function (res) {
for (let i in self.cities) {
let city = self.cities[i]
if (city.parent === 0) {
continue
}
let patt = new RegExp(city.name)
if (patt.test(res)) {
self.city = [city.parent, city.value]
return
}
}
})
结语
跳到具体城市那里根据不同业务和不同数据结构可能稍作不同,但原理均是大同小异。