微信服务号获取地理位置遇到的问题

214 阅读2分钟

config配置

因为项目中用了vux所以用微信里的方法都是用的this.$wechat(这个也是需要安装的 然后可以全局引用import { WechatPlugin } from 'vux' Vue.use(WechatPlugin) ),

没有用这个插件的话就把文章中的this.$wechat换成wx.就可以

    function wxConfig(that,localhref){ 
        let qustloHref = encodeURIComponent(location.href.split('#')[0])  
        that.$http.get("/wechat/workOrder/jssdk?url="+qustloHref) .then(res =>{
          let resData = res.data.data; 
          that.$wechat.config({ 
              // 开启调试模式,调用的所有api的返回值会在客户端alert出来,
              //若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              debug: false, 
              // 必填,企业号的唯一标识,此处填写企业号
              corpid timestamp: resData.timestamp,
              // 必填,生成签名的时间戳 
              appId: resData.appId, 
              // 必填,生成签名的随机串 
              nonceStr: resData.nonceStr,
              // 必填,签名 
              signature: resData.signature,
              // 必填,需要使用的JS接口列表
              jsApiList:['openLocation','getLocation'] 
            })
           }, 
           res => { })
           .catch(res => { }); 
       }

特别注意

let qustloHref = encodeURIComponent(location.href.split('#')[0])
//路由必须要用hash模式history模式会报错
//显示签名invalid signature encodeURIComponent也是要加的不加也会报错
// encodeURIComponent这个我看网上资料很多都没有加也没有报错的问题,但是我这边没有加是不可以的,具体什么原因不知道???
// 获取地理位置(这里用了Promise来实现数据同步不然的经纬度获取不出去)
function getCurrentLocation(that){ 
    return new Promise(function(resolve,reject){ 
    that.$wechat.getLocation({ type: 'wgs84', 
    // gps坐标 百度地图api用的百度坐标可能有偏差 
    success: function (res) {
        let latitude = res.latitude; 
        let longitude = res.longitude; 
        let params={ "longitude": longitude, "latitude": latitude, }; 
        //这里将地理位置返回了 其实前台是可以展示出位置来的 因为一开始没研究到就暂时把经纬度返回给了后台 
        resolve(params) 
       }, 
       canel:function(res){ 
       reject(new Error('用户拒绝授权获取地理位置')) },
       fail:function(res){ reject(res) } }); 
      })
     }
 //获取城市 虽然没用到但是记录一下前端的写法 
 getlongalt(){ 
 //参数分别是经度和维度 
     let point = new BMap.Point(120.4781,36.146454);
     let gc = new BMap.Geocoder(); 
     let address = ''; 
     let that = this; 
     gc.getLocation(point, function (rs) {
         let addComp = rs.addressComponents;
         //详细地址为省,市,行政区,街道,街道地址 
         address = addComp.province+ addComp.city + addComp.district + addComp.street + addComp.streetNumber; that.localAddress = address; window.localStorage.city = addComp.city;
         //当前城市 
         window.localStorage.district = addComp.district; 
     }); 
   },

**特别注意(这个是在html里面必须要有的) **

//这里用的是百度地图(因为公司是百度地图的秘钥就直接拿来用了高德地图应该是同理)具体百度地图的下载安装方法可以百度 贴个链接吧(这个是vue-baidu的下载地址):dafrok.github.io/vue-baidu-m… 之前虽然上面的函数写了但是html里面没有加这个一直显示不出位置来