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

JavaScript地理位置_GeolocationAPI

夜晨

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

原创

566人浏览过

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

javascript地理位置_geolocationapi

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

如何启用地理位置权限

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

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

基本用法：获取当前位置

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

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

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

网博士中英文外贸企业网站源码

系统简介系统三大特色：1、全静态：全站生成.html静态页面。降低服务器压力，增强百度收录。2、高优化：特别针对搜索引擎进行优化处理，让客户快速找到你。3、够简单：拥有完善后台管理系统，所有内容均可在后台进行更新。非专业人士也可操作。网站后台后台管理地址：http://你的网站域名/Admin/login.asp用户名：admin密码：admin后台文件夹名：Admin数据库存放位置：Data21

查看详情

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>

登录后复制