1.检查浏览器兼容

navigator.geolocation 坑:l是小写的。此api未遵循传统驼峰式命名规则。

2.获取地理信息

navigator.geolocation.getCurrentPosition(回调函数1,回调函数2);
传值:
回调1:position
回调2: error
经度:position.coords.longitude
纬度:position.coords.latitude

【效果图】

【代码】

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            document.getElementById('geo').innerHTML = '<center><h1>东风速递,使命必达!</h1></center><hr>正在查询地理位置......';
            if(!navigator.geolocation){
                document.getElementById('geo').innerHTML = '<center><h1>东风速递,使命必达!</h1></center><hr>此浏览器不支持地理位置查询。';
                return;
            }
            navigator.geolocation.getCurrentPosition(showLocation,showError);//---------------
        }

        function showLocation(position) {//-----------------------
            document.getElementById('geo').innerHTML = '<center><h1>东风速递,使命必达!</h1></center><hr>定位成功,洲际导弹准备发射!!!<br>'+'经度:<a style="color: red;">'+position.coords.longitude+'</a><br>纬度:<a style="color: red;">'+position.coords.latitude+'</a>';
        }

        function showError() {//---------------------------
            document.getElementById('geo').innerHTML = '<center><h1>东风速递,使命必达!</h1></center><hr>定位失败,你可能在二次元世界!';
        }
    </script>
</head>
<body>
    <div id="geo"></div>
</body>
</html>