美文网首页
获取用地理位置

获取用地理位置

作者: 小太阳可可 | 来源:发表于2019-02-12 10:41 被阅读0次

用户在关注后进入公众号会话时,会弹框让用户确认是否允许公众号使用其地理位置。弹框只在关注后出现一次,用户以后可以在公众号详情页面进行操作。
由于微信的获取用户地理位置的接口只会返回用户所在地区的经纬度,所以我们借用的了百度地图的Api开发文档。

1.先使用百度地图提供的坐标转换接口

        $.ajax({
            type: "GET",
            url: 'https://api.map.baidu.com/geoconv/v1/?coords='+latitude+','+longitude+'&from=1&to=5&ak=密钥',
            contentType: 'application/json',
            dataType:'jsonp',
            responseType:'application/json',
            xhrFields: {
              withCredentials: false
            },
            headers: {
              'Access-Control-Allow-Credentials' : true,
              'Access-Control-Allow-Origin':'*',
              'Access-Control-Allow-Methods':'GET',
              'Access-Control-Allow-Headers':'application/json',
            },
            success: function (msg) {
              try {
                var result = msg.result;
                var lat = result[0].y;
                var lng = result[0].x;
                _this.asdasdas(lng,lat)
              } catch (e) {
                 console.log(e)
              }
            }
          });

2. 再使用百度地图全球逆地理编码接口

       $.ajax({
         type: "GET",
         //url: 'http://api.map.baidu.com/geoconv/v1/?coords='+40.040295+','+116.30194+'&from=1&to=5&ak=Cs520r6h0BWrO0Q5V3sjSER41jGR8wB9',
         url: 'https://api.map.baidu.com/geocoder/v2/?location='+x+','+y+'&output=json&ak=Cs520r6h0BWrO0Q5V3sjSER41jGR8wB9',
         contentType: 'application/json',
         dataType:'jsonp',
         responseType:'application/json',
         xhrFields: {
           withCredentials: false
         },
         headers: {
           'Access-Control-Allow-Credentials' : true,
           'Access-Control-Allow-Origin':'*',
           'Access-Control-Allow-Methods':'GET',
           'Access-Control-Allow-Headers':'application/json',
         },
         success: function (msg) {
           try {
             _this.city=msg.result.addressComponent.province;
             _this.Http();
           } catch (e) {
             console.log(e)
           }
         }
       });
1.png
根据参数选取你所需要的字段渲染到页面位置。(请一定注意http协议问题,不然很有可能导致安卓和ios不兼容)

相关文章

网友评论

      本文标题:获取用地理位置

      本文链接:https://www.haomeiwen.com/subject/zweheqtx.html