web app 开发总结之三 获取用户地理位置 html5的window.navigator.geolocation

 

    一. window.navigator.geolocation的三个方法:     

  void getCurrentPosition(onSuccess,onError,options);
  //获取用户当前位置

  int watchCurrentPosition(onSuccess,onError,options);
  //持续获取当前用户位置

  void clearWatch(watchId);
  //watchId 为watchCurrentPosition返回的值
  //取消监控


options = {
enableHighAccuracy,//boolean 是否要求高精度的地理信息
timeout,//获取信息的超时限制
maximumAge//对地理信息进行缓存的时间
}
  //options可以不写,为默认即可

二、position对象

      当成功获取地理位置信息时候,onsuccess方法中会返回position对象,通过这个对象可以获取地理位置的相关信息,包括:

       position对象的属性:

latitude,//纬度

longitude,//经度

altitude,//海拔高度

accuracy,//获取纬度或者经度的精度

altitudeAccurancy,//海拔高度的精度

heading,//设备前景方向。正北方向的顺时针旋转角

speed,//设备的前进速度 m/s

timestamp,//获取地理位置信息时候的时间

三. 代码
//初始化地理位置
        if (sessionStorage.getLocationFlag != "1") {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        var lat = position.coords.latitude;
                        var lng = position.coords.longitude;
                        var param = $.param({
                            longitude: lng,
                            latitude: lat
                        });
                        $.ajax({
                            url: ConfigHelper.ApiUrl() + "/area/ConvertLocationFromGps",     //根据经纬度得到城市
                            data: param,
                            type: "Post",
                            processData: false,
                            timeout: 10000,
                            dataType: "json",
                            contentType: "application/x-www-form-urlencoded; charset=utf-8",
                            success: function (data, textStatus) {
                                if (data && data.Response && data.Response.ErrorCode == 0) {
                                    if (data.Response.Result) {
                                        var item = data.Response.Result;
                                        var currenrLocation = { CityId: item.CityId, CityCode: item.CityCode, CityName: item.CityName, Longitude: item.Longitude, Latitude: item.Latitude, Address: item.Address };
                                        localStorage.currenrLocation = JSON.stringify(currenrLocation);
                                        sessionStorage.getLocationFlag = "1";
                                    }
                                } else {
                                    if (localStorage.currenrCity == undefined) {
                                        localStorage.currenrCity = JSON.stringify({ Id: 92, Name: "深圳" });
                                        $("#home_index #btnChangeCity").text("深圳");
                                    }
                                }
                            },
                            error: function () {
                                if (localStorage.currenrCity == undefined) {
                                    localStorage.currenrCity = JSON.stringify({ Id: 92, Name: "深圳" });
                                    $("#home_index #btnChangeCity").text("深圳");
                                }
                                $.mobile.changePage("#errorDialog", { transition: "pop", role: "dialog", changeHash: false });
                            },
                            complete: function () {
                                $.mobile.loading('hide');
                            }
                        });
                    },
                    function () {
                        if (localStorage.currenrCity == undefined) {
                            localStorage.currenrCity = JSON.stringify({ Id: 92, Name: "深圳" });
                            $("#home_index #btnChangeCity").text("深圳");
                        }
                    },
                    {
                        enableHighAcuracy: true,
                        timeout: 5000,
                        maximumAge: 3000
                    });
            } else {
                if (localStorage.currenrCity == undefined) {
                    localStorage.currenrCity = JSON.stringify({ Id: 92, Name: "深圳" });
                    $("#home_index #btnChangeCity").text("深圳");
                }
            }
        } else {
            if (localStorage.currenrCity == undefined) {
                localStorage.currenrCity = JSON.stringify({ Id: 92, Name: "深圳" });
                $("#home_index #btnChangeCity").text("深圳");
            }
        }
        //设置默认城市
        if (localStorage.currenrCity) {
            var currenrCity = JSON.parse(localStorage.currenrCity);
            $("#home_index #btnChangeCity").text(currenrCity.Name);
        }
    };

 



 

转载于:https://www.cnblogs.com/TierraPan/p/4831497.html

### 解决方案概述 在 WebApp 开发过程中,当遇到 `Geolocation permission denied` 和 `Get ipLocation failed` 的问题时,通常是因为浏览器的安全策略限制了对地理位置信息的访问。以下是针对 Vue3、Nuxt3 以及 H5 移动端项目的解决方案。 --- #### 1. **HTTPS 协议** 许多现代浏览器仅允许通过 HTTPS 提供地理定位服务。如果项目运行在 HTTP 下,则可能导致无法正常获取位置信息[^2]。 解决办法:将开发环境切换到 HTTPS 上。可以通过以下方式实现: - 使用本地证书工具(如 mkcert)生成自签名 SSL 证书并配置至开发服务器。 - 如果使用 Vite 或其他构建工具,可以启用内置的 HTTPS 功能。例如,在 Vite 中设置如下参数: ```javascript // vite.config.js export default { server: { https: true, // 启用 HTTPS }, }; ``` --- #### 2. **用户授权管理** 即使启用了 HTTPS,仍需确保用户的设备已授予网页访问其地理位置的权限。部分情况下,浏览器可能默认禁用该功能或因隐私设置而阻止请求。 建议检查以下几点: - 浏览器地址栏是否有提示询问是否允许共享位置。 - 若未弹出提示框,可能是由于之前选择了“永久拒绝”。此时可清除站点数据或更改浏览器设置中的权限选项[^1]。 对于移动端应用,还需确认操作系统层面的位置服务已被开启,并赋予相应 APP 访问权限[^3]。 --- #### 3. **API 调整与兼容处理** 高德地图提供了多种接口用于获取用户当前位置。如果当前使用的 AMap.Geolocation 插件存在问题,可以尝试替换为更基础的方法来捕获坐标值。比如调用原生 HTML5 地理定位 API 进行测试: ```javascript navigator.geolocation.getCurrentPosition( (position) => { console.log('Latitude:', position.coords.latitude); console.log('Longitude:', position.coords.longitude); }, (error) => { console.error('Error Code:', error.code); // 参考错误码定义文档 console.error('Message:', error.message); } ); ``` 上述代码片段展示了如何利用标准 JavaScript 方法取得纬度经度数值。注意它同样依赖于安全连接及适当许可状态才能生效。 另外还可以考虑引入第三方库辅助完成任务,像 leaflet.js 就封装好了跨平台支持的地图操作逻辑。 --- #### 4. **模拟调试模式下的替代措施** 为了便于排查实际部署前可能出现的各种异常情况,可以在非生产环境下采用固定 IP 定位作为临时解决方案。即预先设定好一组虚拟 GPS 数据代替真实采集结果反馈给前端界面显示出来即可满足初步验证需求。 示例伪代码如下所示: ```javascript function mockGeoData() { const fakePos = { coords: { latitude: '39.9087', longitude: '116.3975' } }; return Promise.resolve(fakePos); } if (!window.navigator || !window.navigator.geolocation) { window.navigator.geolocation = {}; } Object.defineProperty(window.navigator.geolocation, 'getCurrentPosition', { value(callback){ callback(mockGeoData()); } }); ``` 此脚本创建了一个伪造的对象结构模仿真实的 geolocation 对象行为从而绕过潜在障碍继续执行后续流程. --- ### 结论 综上所述,要彻底消除此类故障现象需要从以下几个方面入手综合施策: - 确保整个网络传输过程均处于加密状态下进行; - 明确告知访客为何索求敏感个人信息以便获得他们的积极配合; - 正确加载必要的外部资源文件并且合理运用它们所提供的各项特性; 最终达到既保护个人隐私又能顺利完成业务目标的目的. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值