H5获取经纬度,反查位置信息

需求:
获取在某一区域周围上报的记录信息。
思路
一、
前端页面获取经纬度信息,下面代码写了两种方式:一种采用navigator获取位置信息、一种采用百度地图API 定位,推荐使用百度,定位精度高。
前台获取到经纬度后保存到数据库,后台再根据经纬度反查出区域位置信息,还是采用百度地图的API,百度地图开放平台相关参数(http://lbsyun.baidu.com/apiconsole/key)
二、
后台根据保存的经纬度信息,调用百度地图【全球逆地理编码】API(http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad)
H5获取经纬度,反查位置信息_第1张图片
这里需要设置这两个参数,一个是在百度管理后台创建的应用ak,另一个是召回半径。

#ak
baidu.ak=
#poi召回半径,允许设置区间为0-1000米,超过1000米按1000米召回。
baidu.radius=

前端代码

<script type="text/javascript"
                src="http://api.map.baidu.com/api?v=2.0&ak=xkqsnW9pPnM2Fi8tVCSBCGBzMpiSrGdg">script>
        <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js">script>
        <script type="text/javascript">
            window.onload = userType;
            var long;
            var lati;

            function userType() {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                //alert('是否是Android:' + isAndroid);
                if (isAndroid) {
                    getLocation();
                }
                //alert('是否是iOS:' + isiOS);
                if (isiOS) {
                    getLocation2();
                }
            }

            // 获取经纬度信息(安卓)

            function getLocation() {
                var options = {
                    enableHighAccuracy: true,
                    maximumAge: 1000
                }
                if (navigator.geolocation) {
                    //浏览器支持geolocation
                    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
                } else {
                    //浏览器不支持geolocation
                    alert('您的浏览器不支持地理位置定位');
                }
            }


            //成功时
            function onSuccess(position) {
                //返回用户位置
                //经度
                var longitude = position.coords.longitude;
                //纬度
                var latitude = position.coords.latitude;

                var lo = longitude.toString().split(".");
                var lo1 = lo[1].substring(0, 4);
                var lo2 = parseInt(lo1) + 113;
                long = lo[0].toString() + "." + lo2.toString();

                var la = latitude.toString().split(".");
                var la1 = la[1].substring(0, 4);
                var la2 = parseInt(la1) + 43;
                lati = la[0].toString() + "." + la2.toString();

                /*alert('经度' + long + ',纬度' + lati);

                //根据经纬度获取地理位置,不太准确,获取城市区域还是可以的
                var map = new BMap.Map("allmap");
                var point = new BMap.Point(long, lati);
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                });*/
            }

            //失败时
            function onError(error) {
                switch (error.code) {
                    case 1:
                        alert("位置服务被拒绝");
                        break;
                    case 2:
                        alert("暂时获取不到位置信息");
                        break;
                    case 3:
                        alert("获取信息超时");
                        break;
                    case 4:
                        alert("未知错误");
                        break;
                }
            }

            // 获取经纬度信息(IOS)
            function getLocation2() {
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        var mk = new BMap.Marker(r.point);
                        lati = r.point.lat;
                        long = r.point.lng;
                        alert('经度' + long + ',纬度' + lati);
                        /*var pt = new BMap.Point(long, lati);
                        var geoc = new BMap.Geocoder();
                        geoc.getLocation(pt, function (rs) {
                            var addComp = rs.addressComponents;


                            var city = addComp.city;
                            var addComp = rs.addressComponents;
                            var texts = addComp.district + "-" + addComp.street + "-" + addComp.streetNumber;
                            //获取地理位置成功,跳转
                            alert(texts);

                        });*/
                    }
                });
            }

后端代码

@Override
    public void save(VehicleViolation vehicleViolation) {
        // 根据经纬度反查位置信息
        if (!Strings.isNullOrEmpty(vehicleViolation.getLongitude()) &&
                !Strings.isNullOrEmpty(vehicleViolation.getLatitude())) {
            String url = Constants.BAIDU_MAP_URL + vehicleViolation.getLatitude() + "," +
                    vehicleViolation.getLongitude() + "&output=json&pois=1&radius=" + radius + "&ak=" + ak;
            String jsonStr = HttpUtil.httpRequest(url);
            if (!Strings.isNullOrEmpty(jsonStr)) {
                JSONObject parseObject = JSON.parseObject(jsonStr);
                JSONObject jsonObject = parseObject.getJSONObject("result");
                String position = jsonObject.getString("sematic_description");
                if (!Strings.isNullOrEmpty(position)) {
                    vehicleViolation.setPosition(position.split(",")[0]);
                }
            }
        }
        vehicleViolationRepository.save(vehicleViolation);
    }

效果
前台获取经纬度信息
H5获取经纬度,反查位置信息_第2张图片
后台反查到的位置范围信息
H5获取经纬度,反查位置信息_第3张图片

你可能感兴趣的:(前端开发)