html5 - 地理位置信息_html获取当前定位并在控制台输出-CSDN博客

本文深入探讨navigator.geolocation API的使用，包括getCurrentPosition和watchPosition方法，以及如何监听设备加速度变化。提供了代码示例，展示了如何在浏览器中获取位置信息和加速度数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. navigator.geolocation

	<script>
        console.log(window.navigator.geolocation)    //打印结果如下图
    </script>

在这里插入图片描述

2. getCurrentPosition (success,error,option)

success 成功的回调函数
error 调用失败的回调函数，
option 参数

需要翻墙才能获取到数据

成功的回调：

	<script>
        window.navigator.geolocation.getCurrentPosition(function(e){
            console.log(e)
        })   
    </script>

在这里插入图片描述

详情信息：

在这里插入图片描述

option 参数:

在这里插入图片描述

3. watchPosition(success,error,option)

	<script>
        window.navigator.geolocation.watchPosition(function(e){
            console.log(e)
        })   
    </script>

4. window.addEventListener (监听加速度变化)

devicemotion 设备监听事件

	<script>
        window.addEventListener('devicemotion',function(e){
            console.log(e)
        })   
    </script>

浏览器控制台打印太多信息，只展示一部分

acceleration 加速度对象上的 x,y,z 轴：

在这里插入图片描述

accelerationIncludingGravity （重力加速度下的三条轴）：
在这里插入图片描述
currentTarget 当前目标

rotationRate 旋转速度

手机访问 Wampserver 的网页

使用 Wampserver 模拟服务器把httpd.conf 和 httpd-vhosts.conf 文件里面的 Require local 改成 Require all granted ; 手机就可以访问网页了，前提是要在同一个局域网下，localhost 换成同一个局域网下的 ip , 例如无线局域网下的 192.x.x.x