美文网首页
HTML5获取地理位置信息Geolocation API

HTML5获取地理位置信息Geolocation API

作者: 0清婉0 | 来源:发表于2021-03-15 20:20 被阅读0次

    地理定位是HTML5中新增的API特性,它允许JavaScript程序向浏览器询问用户真实的地理位置。

    方法:

    navigator.geolocation.getCurrentPosition() 获取用户当前的位置。该方法需要接受一个回调函数作为参数,如果这个方法成功则返回的地理数据对象,该对象包含了用户地理位置的信息,信息内容大概为:

    coords.latitude  用户地理位置的十进制纬度

    coords.longitude  用户地理位置的十进制经度

    coords.accuracy 用户地理位置的 位置精度  以米为单位

    coords.altitudeAccuracy 用户地理位置的 位置海拔精度  以米为单位

    coords.heading 用户设备当前移动的角度方向,以正北方向顺时针计算。

    coords.speed 用户当前的 移动速度 以米为单位

    timestamp 响应的时间/日期

    navigator.geolocation.getCurrentPosition()和 navigator.geolocation.watchPosition()这两个方法通过接收两个参数: 第一个参数是一个回调函数,即当这个方法请求成功时,就会调用这个回调函数,这个回调函数包含了用户位置的信息。也就是 回调函数的参数对象可以访问这些位置信息。 第二个参数是在这两个方法失败时调用的回调函数。

    <p id="demo">获得坐标:</p>

    <button onclick="getLocation()">单击我,查看坐标</button>

    <script>

    function getLocation(){

        if(navigator.geolocation){

            navigator.geolocation.getCurrentPosition(showPosition);

        }else{

            x.innerHtml = '这个浏览器不支持'

        }

    }

    function showPosition(position){

        x.innerHtml = '纬度:' + position.coords.latitude + "<br />经度:" + position.coords.longitude;

    }

    </script>

    相关文章

      网友评论

          本文标题:HTML5获取地理位置信息Geolocation API

          本文链接:https://www.haomeiwen.com/subject/xofjcltx.html