高德,微信公众号,企业微信获取定位

时间:2024-03-12 19:02:44

微信公众号开发文档: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.企业微信(同微信公众号)