zoukankan      html  css  js  c++  java
  • 高德,微信公众号,企业微信获取定位

    微信公众号开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

    高德文档:https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker

    1.高德地图: 

    1-1.获取当前定位信息

     AMap.plugin(['AMap.Geolocation'],  ()=> {     
            const geolocation =  new AMap.Geolocation({timeout: 10000});
            map.addControl(geolocation);
            geolocation.getCurrentPosition( (status, result) =>{
                if (status == 'complete') {
                    onComplete(result)
                } else {
                    onError(result)
                }
            });
        })

    1-2. 根据经纬度获取定位信息

    function getWGSLocation(locationarg){ // 传入经纬度,格式:`${longitude},${latitude}`
        return new Promise(function(resolve, reject){
            AMap.convertFrom(locationarg,
              "gps",
              (status, result) => { // WGS84 转高德
                if (status.toLowerCase() === 'complete' && result.info.toLowerCase() === 'ok') {
                  const lon = result.locations[0].getLng();
                  const lat = result.locations[0].getLat();
                  geocoder.getAddress([lon, lat],
                    (s, r) => {
                      if (s.toLowerCase() === 'complete' && r.info.toLowerCase() === 'ok') {
                        resolve(r)
                      } else {
                        console.log('error');                    
                      }
                    });
                } else {
                  console.log('error');
                }
              });
    
        })
    }

    2.微信公众号获取定位:

    2-1.配置wx.config(为了安全,所有信息要从服务端获取)

    import wx from 'weixin-jsapi'; //npm安装weixin-jsapi 或者直接页面引用
    
    // 通过后端的接口拿到appid,签名...等信息,注:当前页面的href不可以有#,否去取不到
    axios.post('/Home/GetWxJsSdkParam', {url:location.href.split('#')[0]}).then((response) => {
        const c = res;
        wx.config({
            beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
            // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: c.AppId, // 必填,企业号的唯一标识,此处填写企业号corpid
            timestamp: c.TimeStamp, // 必填,生成签名的时间戳
            nonceStr: c.NonceStr, // 必填,生成签名的随机串
            signature: c.Sign,// 必填,签名,见附录1
            jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
        });
    })

    2-2.获取当前位置的经纬度,然后根据微信返回的经纬度,调用上面高德地图的1-2的getWGSLocation方法

     const that = this;
          wx.getLocation({
            type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            success: function (res) {
              console.log(res)
              const latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
              const longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。 
    
              // `${longitude},${latitude}`
              getWGSLocation(longitude+','+latitude).then((r)=>{
                  console.log(r);// 获取的具体位置信息;
              })
            },
            fail:function(err){
              console.log('微信调用失败哦');
              console.log(err); 
            }
          });

    3.企业微信(同微信公众号)

  • 相关阅读:
    用mathematica求六元一次方程组且方程个数比变量个数少一个
    abaqus学习笔记-abaqus与umat调用基本原理
    abaqus UMAT二次开发能用fortran90吗?
    vba遗传算法之非一致性突变
    学习刘伟择优excel视频
    EXCEL中R1C1样式引用
    Oracle常见问题
    Oracle数据库 —— DML完结
    Bootstrap前端框架
    Jsoup学习笔记
  • 原文地址:https://www.cnblogs.com/darkbluelove/p/11376045.html
Copyright © 2011-2022 走看看