web前端定位的经验

最新推荐文章于 2024-06-01 19:59:37 发布

小盖兽

最新推荐文章于 2024-06-01 19:59:37 发布

阅读量3.2k

点赞数

文章标签： javascript web前端 api html5 浏览器

本文链接：https://blog.csdn.net/weixin_37837174/article/details/78472155

版权

web前端定位的经验

移动端
基本上用geolocation 就可以，定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
以下是简单的判断你的浏览器能不能使用geolocation 的代码

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>
    </body>
</html>

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
    <script type="text/javascript">

    function getLocation() {
            var option={
                enableHighAccuracy:true,
                //值为boolen，顾名思义指是否允许高精度，默认false,因为一般应用不需要太高精度，而且耗时过长
                maximumAge:1000
                //应用接受新点位的时间
            }
            alert("this is getLocation()");
            if (navigator.geolocation){
                //支持
                navigator.geolocation.getCurrentPosition(onSuccess,onError,option);
            }else {
                alert("浏览器不支持");
            }
        }
        function onSuccess(position) {
//            返回用户位置
                var longgitude=position.coords.longitude;//coords坐标
                var latitude=position.coords.latitude;
                alert('经度'+longgitude+"纬度"+latitude);
                var map=new BMap.Map("allmap");
                var point=new  BMap.Point(longgitude,latitude);
                var gc=new BMap.Geocoder();
                gc.getLocation(point,function (rs) {
                    var addComp=rs.addressComponents;
                    alert(addComp.province+","+addComp.city);
                    //???
            });
                postData(longgitude,latitude);

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

          }
          var longitude=23.18333;
            var latitude=113.42333;
            postData(longitude,latitude);
        }
        //页面载入时请求获取当前地理位置
        window.onload=function () {
            getLocation();
        }
    </script>

PC端
最方便的方法就是调用百度地图的API
百度地图开发平台
1.登录注册后，找到百度地图JavaScript API
这是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。免费对广大用户开放。

2.对于个人学习测试可以不用注册成为百度开发者，这有点麻烦我们忽略先，接下来看步骤3
3. 按照自己需要，学习做着练手写*就好
4.在html文件里调用就好了

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

其他功能跟调用具体就看看百度的官方文档实例啦很好上手的，对照着实例DEMO练练吧

geolocation得到的经纬度是未经加密的，但是数值可能相对现有的地图类产品不够准确，而因为国内产品的经纬度基本都有加密，所以要转换成地图上相应位置最好直接用现成的API

在别的博主的文中，可以看到最简单的解决办法
html5物理定位误差大解决办法
第一次写博客有什么建议或问题欢迎提出谢谢

小盖兽

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
web前端定位的经验

web前端定位的经验移动端基本上用geolocation 就可以，定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
复制链接

扫一扫