HTML5地理位置Geolocation以及百度地图应用

最新推荐文章于 2024-06-22 11:04:52 发布

马灿发

最新推荐文章于 2024-06-22 11:04:52 发布

阅读量3.6k

点赞数

分类专栏： javascript HTML5 文章标签： html5 geolocation 浏览器

本文链接：https://blog.csdn.net/macanfa/article/details/51945974

版权

本文介绍了HTML5的Geolocation API，用于获取用户的地理位置信息，并探讨了浏览器的兼容情况。通过navigator.geolocation对象进行单次和多次定位请求，详细解析了请求成功和失败时的处理。此外，还讲解了基于地图信息的LBS应用，特别是如何使用百度地图API，包括获取API秘钥和解决授权问题。文章以实例展示了地理信息在实际应用中的趣味性和潜力。

摘要由CSDN通过智能技术生成

什么是地理位置？

简单说说主要由经度和纬度确定一个地理位置（经度 : 南北极的连接线
纬度 : 东西连接的线）

注意：浏览器默认不共享地理位置信息，需要开启共享设置！

浏览器检测支持情况：

if (navigator.geolocation) {
    console.log("浏览器支持!");
 }
else {
     console.log("浏览器不支持!");
 }

地理位置对象：navigator.geolocation对象

单次定位请求

方法：getCurrentPosition(successfn(position),errorfn(err),options)

position为请求成功后获取到的数据信息对象,err为请求失败函数返回的对象，options可以简单理解为配置对象…吧

在请求成功函数中有以下属性：

经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)

在请求失败函数中有4种情况（err.code状态值）：

1为用户拒绝定位请问
2暂时获取不到位置信息
3为请求超时
4未知错误

第三个options是可选参数，属性如下：

enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。
maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。

JS：

window.onload = function() {
   
            var oInput = document.getElementById('input1');
            var oT = document.getElementById('t1');

            oInput.onclick = function() {
   
              //单词请求方法getCurrentPosition()
                navigator.geolocation.getCurrentPosition(function(position) {
   

                    oT.value += '经度:' + position.coords.longitude + '\n';
                    oT.value += '纬度 :' + position.coords.latitude + '\n';
                    oT.value += '准确度 :' + position.coords.accuracy + '\n';
                    oT.value += '海拔 :' + position.coords.altitude + '\n';
                    oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy +