HTML实现位置感知

最新推荐文章于 2021-10-07 08:39:19 发布

Flora1108

最新推荐文章于 2021-10-07 08:39:19 发布

阅读量494

点赞数 1

分类专栏： Head First HTML5笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_39480464/article/details/78626556

版权

Head First HTML5笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

地理定位API如何确定你的位置：
所有浏览器（不论是设备浏览器，还是桌面浏览器）会使用以下几种不同的方法来确定位置，有的不那么精确，有的则很精确。

1、IP地址
基于IP地址的位置信息使用一个外部数据库将IP地址映射到一个物理位置。这种方法的好处是任何地方都可以使用。不过，IP地址通常会解析为其他位置，而不是你的具体位置，比如你的ISP本地分局的位置，而不是你的具体位置。可以认为这种方法在城市级（甚至有时在街区级）很可靠。

2、GPS
很多较新的移动设备都支持全球定位系统（Global Positioning System），它能利用卫星提供极其精确的位置信息。不过，要使用GPS，你的设备必须能看到天空，而且肯呢过需要花很长时间才能得到位置。另外，GPS还很耗电。

3、蜂窝电话
蜂窝电话三角定位可以根据你与一个或多个蜂窝电话基站的举例来确定你的位置（基站越多，位置就越准确）。这种方法可能相当精确，在室内也能用，而且它也比GPS快得多。不过，它的缺点也很明显，如果你的位置很偏僻，周围只有一个蜂窝基站，位置可能就不那么精确了。

4、WiFi
WiFi定位使用一个或多个WiFi接入点完成三角定位。这种方法可能很精确，而且，速度也很快。但这要求你想对处于静态。

通过浏览器获取位置的代码：

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Where am I?</title>
        <script src="myLoc.js"></script>
    </head>
    <body>
        <!--这个div用来输出位置信息-->
        <div id="location">
            Your location will go here.
        </div>
    </body>
</html>

myLoc.js文件：

//一旦浏览器加载页面，将调用函数getMyLocation。
window.onload = getMyLocation;
function getMyLocation(){
    //利用这个检查来确保浏览器支持地理定位API。如果navigator.geolocation对象存在，说明浏览器支持这个API。
    if (navigator.geolocation) {
        //如果浏览器支持地理定位API，则调用getCurrentPosition方法，并传入一个调用成功处理函数displayLocation以及一个调用失败处理函数displayError。  
    navigator.geolocation.getCurrentPosition(displayLocation,displayError);
    } else{
        //如果浏览器不支持地理定位，就向用户弹出一个提醒。
        alert("Oops, no geolocation support");
    }
}
//调用成功处理函数，浏览器得到一个位置时就会调用这个函数。
//向displayLocation传入一个位置，其中包含位置的纬度和经度。
function displayLocation(position){
    //从position.coords对象得到位置的纬度和经度
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    //将位置信息显示在浏览器中
    var div = document.getElementById("location");
    div.innerHTML = "You are at Latitude: "+latitude+", Longitude: "+longitude;
}
//当地理定位找不到位置时调用函数displayError，地理定位API会向它传入一个错误。
//error对象有一个code属性，其中包含一个0—3的数。这是用javascript为各个错误码关联一个错误消息的好办法。
function displayError(error){
    //创建一个对象，包含4个属性，分别名为0—3。这些属性是串，包含了我们希望与各个错误码关联的错误消息。
    var errorTypes = {
        0: "Unknown error",//“全包型”错误，如果其他错误都不适合就会返回这个错误。
        1: "Permission denied by user",//用户拒绝了使用位置信息的请求。
        2: "Position is not available",//浏览器尝试过，但没能得到你的位置信息。
        3: "Request timed out"//地理定位有一个内部超时设置，如果超出了这个时间限制仍然没能确定位置，就会导致这个错误。
    };
    //使用error.code属性，将一个错误信息串赋给一个新变量errorMessage
    var errorMessage = errorTypes[error.code];
    //对于错误0和2，有时error.message属性中会有一些额外的信息。所以把这些信息增加到errorMessage串。
    if (error.code == 0||error.code == 2) {
        errorMessage = errorMessage+" "+error.message;
    }
    //将这个消息增加到页面，让用户知道
    var div = document.getElementById("location");
    div.innerHTML = errorMessage;
}

getCurrentPosition方法:

getCurrentPosition(successHandler,errorHandler,options)

它有3个参数，其中errorHandler与options可选。

successHandler是一个函数，如果浏览器能够成功确定位置，就调用此函数。
errorHandler是另外一个函数，如果出了问题，浏览器无法确定位置，则会调用这个函数。
options参数允许定制地理定位方法。

Flora1108

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML实现位置感知

地理定位API如何确定你的位置：所有浏览器（不论是设备浏览器，还是桌面浏览器）会使用以下几种不同的方法来确定位置，有的不那么精确，有的则很精确。1、IP地址基于IP地址的位置信息使用一个外部数据库将IP地址映射到一个物理位置。这种方法的好处是任何地方都可以使用。不过，IP地址通常会解析为其他位置，而不是你的具体位置，比如你的ISP本地分局的位置，而不是你的具体位置。可以认为这
复制链接

扫一扫