脚本巴巴 www.jiaoben88.com

H5结合百度map实现GPS定位

发布时间:2017-06-05 20:44:37编辑:脚本巴巴

目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市。按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称。

1、查询得到城市名称,我们根据城市名称在我们自己的数据库里再查询对应的城市id(查询会很频繁,可以基于xml 缓存查询,也可以放到redis里)

2、为了保险起见,我们也会在自己的库里根据经纬度维护一套城市信息,防止接口不可用时不影响定位。

H5 GPS定位

(function () {
        var
            isGeolocation = false,
            lat = 0,
            lng = 0,
            coords = null;
            
        if (navigator.geolocation) { isGeolocation = true; };
        if (isGeolocation) {
            function getPosSuccess(position) {
                coords = position.coords;
                lat = coords.latitude, lng = coords.longitude;
                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/Home/GetPositionArea',
                    data: { 'lat': lat, 'lng': lng },
                    success: function (data) {

                    }
                });
            };
            function getPosError(err) {
                switch (err) {
                    case err.PERMISSION_DENIED:
                        console.log("您拒绝了共享位置,可手动选择城市。");
                        break;
                    case err.POSITION_UNAVAILABLE:
                        console.log("无法获取当前位置");
                        break;
                    case err.TIMEOUT:
                        console.log("获取位置超时");
                        break;
                    default:
                        console.log("未知错误");
                        break;
                }
                
            };
            navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);
        } else {
            
        };

    })();

结合百度接口查询具体城市

public JsonResult GetPositionArea(decimal lng, decimal lat)
 {
            string api =
                string.Format(
                    "http://api.map.baidu.com/geocoder/v2/?output=json&ak=XXXXX&location={0},{1}",
                    lat, lng);  //传入自己的业务参数ak

            string result = HttpRequestHelper.Get(api);

            return Json(result, JsonRequestBehavior.AllowGet);
  }
上一篇:winfrom 多线程控制窗体 刷新子窗体控件 主窗体弹框时空对象
下一篇:生成以指定字符为开头的md5值(6位数字)实现代码

相关文章