JavaScript地理位置API基础
JavaScript通过浏览器提供的Geolocation API来获取用户的地理位置信息，该API是HTML5规范的一部分，主流现代浏览器都已经支持。使用该API时需要注意，获取用户位置属于敏感操作，浏览器通常会要求页面在HTTPS协议下运行，并且会弹出权限请求弹窗，用户授权后才能获取位置数据。
Geolocation API的核心方法是getCurrentPosition，它用于获取用户的当前位置，方法接收三个参数：成功回调函数、失败回调函数、可选的配置参数。下面是一个基础的位置获取示例：
// 检查浏览器是否支持Geolocation API
if (navigator.geolocation) {
// 调用获取当前位置的方法
navigator.geolocation.getCurrentPosition(
// 成功回调，接收位置对象
function(position) {
// 获取纬度
var latitude = position.coords.latitude;
// 获取经度
var longitude = position.coords.longitude;
// 获取位置精度，单位米
var accuracy = position.coords.accuracy;
console.log('纬度：' + latitude + '，经度：' + longitude + '，精度：' + accuracy + '米');
},
// 失败回调，接收错误对象
function(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log('用户拒绝了位置请求');
break;
case error.POSITION_UNAVAILABLE:
console.log('无法获取位置信息');
break;
case error.TIMEOUT:
console.log('获取位置超时');
break;
default:
console.log('发生未知错误');
}
},
// 配置参数
{
enableHighAccuracy: true, // 是否尝试获取高精度位置
timeout: 10000, // 超时时间，单位毫秒
maximumAge: 0 // 缓存位置的最大时长，0表示不使用缓存
}
);
} else {
console.log('当前浏览器不支持Geolocation API');
}
地图服务集成准备
获取到经纬度之后，需要结合地图服务来展示位置和实现导航功能。国内常用的地图服务有高德地图、百度地图、腾讯地图等，这些服务商都提供了JavaScript版本的SDK，开发者只需要注册账号获取对应的API密钥，就可以在项目中引入使用。下面以高德地图为例说明集成步骤。
首先需要在HTML页面中引入高德地图的JS SDK，需要替换为你自己申请的密钥：
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图API密钥"></script>
引入SDK之后，就可以初始化地图实例，指定地图的容器和初始配置：
// 初始化地图，第一个参数是容器id，第二个参数是配置项
var map = new AMap.Map('mapContainer', {
zoom: 15, // 地图缩放级别，取值范围1-20
center: [116.397428, 39.90923] // 初始中心点，格式为[经度, 纬度]
});
地理位置与地图结合展示
把之前获取到的用户经纬度传递给地图，就可以在地图上标记出用户的位置。通常我们会使用地图的标记点（Marker）组件来展示位置，还可以添加信息窗体显示位置的详细信息。
下面是完整的结合示例，先获取用户位置，再把位置标记到地图上：
// 假设已经引入了高德地图SDK，并且页面有一个id为mapContainer的div容器
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 初始化地图，中心点设置为用户位置
var map = new AMap.Map('mapContainer', {
zoom: 15,
center: [longitude, latitude]
});
// 创建标记点
var marker = new AMap.Marker({
position: [longitude, latitude], // 标记点位置
title: '你的当前位置'
});
// 把标记点添加到地图上
map.add(marker);
// 创建信息窗体
var infoWindow = new AMap.InfoWindow({
content: '<div>当前位置</div><div>纬度：' + latitude + '</div><div>经度：' + longitude + '</div>',
offset: new AMap.Pixel(0, -30)
});
// 点击标记点时打开信息窗体
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
},
function(error) {
console.log('获取位置失败，错误码：' + error.code);
}
);
}
导航功能实现
地图SDK通常还提供了路径规划的功能，支持驾车、步行、公交等多种出行方式的导航。以高德地图的步行导航为例，只需要提供起点和终点的经纬度，就可以获取到导航的路径数据，再在地图上绘制出来。
下面是一个简单的步行导航示例，起点为用户当前位置，终点为预设的目标位置：
// 假设已经获取到用户的经纬度：userLng, userLat
// 目标位置的经纬度，这里以北京天安门为例
var targetLng = 116.397428;
var targetLat = 39.90923;
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 13
});
// 创建步行路径规划插件实例
AMap.plugin('AMap.Walking', function() {
var walking = new AMap.Walking({
map: map // 把路径绘制到地图上
});
// 搜索路径，第一个参数是起点，第二个参数是终点，第三个是回调
walking.search(
[userLng, userLat], // 起点坐标
[targetLng, targetLat], // 终点坐标
function(status, result) {
if (status === 'complete') {
console.log('路径规划成功', result);
} else {
console.log('路径规划失败', result);
}
}
);
});
常见问题与注意事项
权限与协议问题
Geolocation API必须在HTTPS协议下使用，本地开发时使用localhost可以正常获取位置，但是部署到线上必须使用HTTPS，否则浏览器会直接拒绝位置请求。同时要做好权限被拒绝的兜底处理，比如引导用户手动输入位置，或者默认展示一个公共区域的位置。
位置精度问题
不同的设备获取到的位置精度差异很大，手机设备通常可以通过GPS获取较高精度的位置，而电脑设备大多通过IP定位，精度可能只有几公里。可以通过accuracy属性判断位置精度，精度太差时可以提示用户位置可能不准确。
地图密钥安全
申请到的地图API密钥不要直接暴露在前端代码中，最好是后端做一个代理接口，前端请求自己的后端接口，后端再携带密钥请求地图服务，避免密钥被他人盗用产生额外费用。
兼容性处理
虽然大部分现代浏览器都支持Geolocation API，但是还是建议做好兼容性判断，对于不支持的浏览器给出友好的提示，而不是让页面直接报错。同时不同地图SDK的API存在差异，切换地图服务商时需要对应调整代码逻辑。
JavaScript地理位置导航地图集成修改时间：2026-06-10 22:36:34