步驟

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

結語

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