JavaScript地理位置_GeolocationAPI-js教程-PHP中文网

JavaScript地理位置_GeolocationAPI

夜晨

发布： 2025-11-29 21:19:13

原创

544人浏览过

Geolocation API可获取用户位置，需HTTPS环境及用户授权，通过getCurrentPosition()获取一次位置，watchPosition()持续监听，coords包含经纬度、精度等信息。

javascript地理位置_geolocationapi

JavaScript的Geolocation API可以让网页获取用户的地理位置信息，常用于地图服务、位置打卡、附近推荐等功能。使用这个功能不需要额外安装库，现代浏览器原生支持。

如何启用地理位置权限

在调用API前，用户必须授权网站访问位置信息。浏览器会自动弹出提示框请求许可。如果用户拒绝，后续操作将无法获取位置。

确保你的网站使用HTTPS协议，因为大多数浏览器只允许安全环境下使用定位功能（本地开发时localhost例外）。

基本用法：获取当前位置

通过navigator.geolocation.getCurrentPosition()方法可以获取一次性的位置数据。

立即学习“Java免费学习笔记（深入）”；

第一个参数是成功回调函数，接收一个包含坐标信息的对象
第二个参数是失败回调函数，处理用户拒绝或定位失败的情况

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

查看详情

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      console.log(`纬度: ${lat}, 经度: ${lng}`);
    },
    (error) => {
      console.error("定位失败:", error.message);
    }
  );
} else {
  console.log("当前浏览器不支持Geolocation API");
}

登录后复制

持续监听位置变化

使用watchPosition()可以持续跟踪用户的位置变动，适合导航类应用。

每次位置更新都会触发回调函数
返回一个ID，可用clearWatch()停止监听

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    const { latitude, longitude, accuracy } = position.coords;
    console.log(`位置更新 - 纬度:${latitude}, 经度:${longitude}, 精度:${accuracy}米`);
  },
  (error) => {
    console.error("监听失败:", error);
  }
);
<p>// 停止监听
// navigator.geolocation.clearWatch(watchId);</p>

登录后复制