微信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
              }
            }
          })

结语

跳到具体城市那里根据不同业务和不同数据结构可能稍作不同，但原理均是大同小异。