步驟
- 與服務(wù)端通信獲取簽名
- 配置jssdk
- 獲取詳細(xì)經(jīng)緯度后反查騰訊地圖得到確切地址
- 正則匹配已開通服務(wù)城市，匹配成功跳到具體城市
前提
先把需要的js文件引入耿导，因?yàn)橛袝r(shí)在斷網(wǎng)情況下測(cè)試声怔，所以我把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>
與服務(wù)端通信獲取簽名
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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來舱呻，若要查看傳入的參數(shù)醋火，可以在pc端打開，參數(shù)信息會(huì)通過log打出箱吕，僅在pc端時(shí)才會(huì)打印芥驳。
appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp, // 必填茬高，生成簽名的時(shí)間戳
nonceStr, // 必填兆旬，生成簽名的隨機(jī)串
signature, // 必填，簽名怎栽，見附錄1
jsApiList: ['getLocation'] // 必填丽猬，需要使用的JS接口列表，所有JS接口列表見附錄2
})
獲取詳細(xì)經(jīng)緯度后反查騰訊地圖得到確切地址
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)
}
})
})
正則匹配已開通服務(wù)城市婚瓜，匹配成功跳到具體城市
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
}
}
})
結(jié)語
跳到具體城市那里根據(jù)不同業(yè)務(wù)和不同數(shù)據(jù)結(jié)構(gòu)可能稍作不同宝鼓，但原理均是大同小異。
