HTML5 - 地理定位

最新推荐文章于 2022-02-16 21:30:08 发布

学习笔记666

最新推荐文章于 2022-02-16 21:30:08 发布

阅读量554

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/github_26672553/article/details/51286194

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1.不多说，先看一个小demo

<!DOCTYPE html>
<html>
<head>
    <title>地理定位</title>
</head>
<body>
    <div id="location">
        your location will go here
    </div>
</body>
<script type="text/javascript">

    window.onload = getMyLocation;

    function getMyLocation(){
        // 如果navigator.geolocation对象存在，说明浏览器支持这个API
        if (navigator.geolocation) {
            // 如果浏览器支持地理定位API，则调用getCurrentPosition方法
            // 并传入一个处理函数displayLocation
            navigator.geolocation.getCurrentPosition(displayLocation);
        }else{
            alert("你的浏览器不支持地理定位");
        }
    }

    function displayLocation(position){
        // 从position.coords得到纬度和经度
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        var div = document.getElementById("location");
        div.innerHTML = "你在纬度: " + latitude +",经度: " + longitude;
    }
</script>
</html>

实际上，navigator.geolocation属性是一个对象，其中包含了整个地理定位API。下面深入的了解这个方法，它有3个参数，其中2个是可选的：getCurrentPosition(successHandler,errorHandler,options);successHandler浏览器成功回调函数,errorHandler浏览器无法确定你的位置会调用这个函数，options参数允许你定制地理定位方法。

地理定位失败处理
我们需要为getCurrentPosition方法调用增加一个错误处理程序，只要地理定位API在确定你的位置时遇到问题就会调用这个处理程序：getCurrentPosition(displayLocation,displayError);需要知道的是，geolocation将会向你的处理程序传入一个error对象，其中包含了一个数值码

function displayError(error){
        var errorTypes = {
            0: "UnKnow error",
            1: "Permission denied by user",
            2: "Position is no available",
            3: "Request timed out"
        };

        var errorMessage = errorTypes[error.code];
        if (error.code == 0 || error.code == 2) {
            errorMessage = errorMessage + "" + error.message;
        }

        var div = document.getElementById("location");
        div.innerHTML = errorMessage;
    }

学习笔记666

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 - 地理定位

1.不多说，先看一个小demo<!DOCTYPE html><html><head> <title>地理定位</title></head><body> <div id="location"> your location will go here </div></body><script type="text/javascript"> wind
复制链接

扫一扫

专栏目录