定位函数初步

最新推荐文章于 2025-05-26 16:38:55 发布

P-Moon

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量309

点赞数

分类专栏： HTML5学习

本文链接：https://blog.youkuaiyun.com/weixin_44620468/article/details/108536647

版权

HTML5学习专栏收录该内容

3 篇文章

订阅专栏

初步定位函数学习

谷歌浏览器无法获取经纬度
IE不支持此函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 检查html5是否浏览器支持类库 -->
    <script src="modernizr.custom.67796.js"></script>
</head>

<body>
    <div id="app"></div>
    <button onclick="getLocation()">获取位置信息</button>
</body>
<script>
    let div = document.getElementById("app")
    function getLocation() {
        if (Modernizr.geolocation) {
            navigator.geolocation.getCurrentPosition(showMap,showError)//第一个为回调函数，第二个为错误类型
            //navigator.geolocation.watchPosition(showPosition) 持续获得用户位置，停止时调用clearWatch()方法
        }
        else {
            alert("浏览器不支持")
        }
    }
    function showMap(position) {//需要position对象做参数
        let x = position.coords.latitude
        let y = position.coords.longitude
        console.log(x, y)
        div.innerHTML = "纬度：" + x + "，" + "经度：" + y
    }
    function showError(error) {
        switch (error.code) {
            case 1:
                x.innerHTML = "用户拒绝对获取地理位置的请求。"
                break;
            case 2:
                x.innerHTML = "位置信息是不可用的。"//网络不可用或是卫星连接不到
                break;
            case 3:
                x.innerHTML = "请求用户地理位置超时。"
                break;
            case 0:
                x.innerHTML = "未知错误。"
                break;
        }
    }
</script>

</html>