不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

微信H5获取用户地理信息

微信公众号网页JS-SDK提供了获取地理位置接口,可通过这个获取当前用户的经纬度。如下:

wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });

 

详细见:https://mp.weixin.qq.com/wiki,由于习惯使用百度地图API,所以还是通过经纬度获取用户地址。但由于腾讯地图获取的坐标类型与百度地图的不一致,需要进行坐标转换。已经有网友做了相应的转换处理,代码是Java版本的,见这里,由于我的应用场景是微信端,就把它转换成JS版本,如下:

    var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    /// <summary>
    /// 中国正常坐标系GCJ02协议的坐标,转到 百度地图对应的 BD09 协议坐标
    /// </summary>
    /// <param name="lat">维度</param>
    /// <param name="lng">经度</param>
    function Convert_GCJ02_To_BD09(lat,lng)
    {
        var x = lng, y = lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
        lng = z * Math.cos(theta) + 0.0065;
        lat = z * Math.sin(theta) + 0.006;

        return { lng: lng, lat: lat };
    }
    /// <summary>
    /// 百度地图对应的 BD09 协议坐标,转到 中国正常坐标系GCJ02协议的坐标
    /// </summary>
    /// <param name="lat">维度</param>
    /// <param name="lng">经度</param>
    function Convert_BD09_To_GCJ02(lat, lng)
    {
        var x = lng - 0.0065, y = lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
        lng = z * Math.cos(theta);
        lat = z * Math.sin(theta);

        return { lng: lng, lat: lat };
    } 

 

这样,整个过程如下:

wx.getLocation({
    type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    success: function (res) {
        var point = Convert_GCJ02_To_BD09(res.latitude, res.longitude);

        var geoc = new BMap.Geocoder();
        var pt = new BMap.Point(point.lng, point.lat);
        geoc.getLocation(pt, function (rs) {
            alert("您的当前位置:" + rs.address);
        });

    }
});

 

注意:

    1、调用公众号获取地理位置接口时, type要设置为gcj02类型;

    2、调用公众号获取地理位置接口时,需要开启位置信息服务。

 

了解更多:

    腾讯地图坐标拾取器:http://lbs.qq.com/tool/getpoint/ (这里有按经纬度获取地址的示例)。

    HTML5 地理定位 http://www.w3school.com.cn/html5/html_5_geolocation.asp

不允许评论
粤ICP备17049187号-1