微信jssdk獲取確切城市名字

步驟

  • 與服務端通信獲取簽名
  • 配置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
              }
            }
          })

結語

跳到具體城市那里根據不同業務和不同數據結構可能稍作不同,但原理均是大同小異。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容