首先通过navigator.geolocation获取用户位置，再结合高德地图API实现定位标记与导航功能，需处理权限、错误反馈及密钥安全。
JavaScript 地理位置功能让网页可以获取用户的地理位置信息，结合地图 API 可实现导航、定位标记、周边搜索等实用功能。这项技术广泛应用于外卖、打车、天气、社交签到等场景。核心依赖是浏览器的 Geolocation API 和第三方地图服务（如 Google Maps、高德地图、百度地图）。
获取用户地理位置
现代浏览器通过 navigator.geolocation 提供地理位置访问能力。调用 getCurrentPosition() 方法可获取当前位置：
- 成功回调函数接收一个 position 对象，包含经纬度、海拔、精度、速度等信息
- 失败回调处理用户拒绝授权、设备不支持或定位超时等情况
- 建议设置超时和最大缓存时间，提升用户体验
示例代码：
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);
},
{ timeout: 10000, maximumAge: 60000 }
);
}
集成地图显示位置
获取坐标后，需将其可视化在地图上。常用方案包括 Google Maps、高德地图、Mapbox 等。以高德地图为例：
立即学习“Java免费学习笔记（深入）”；
- 注册开发者账号并获取 API Key
- 引入地图 SDK 脚本
- 创建地图实例并设置中心点为用户位置
- 添加标记（Marker）标注当前位置
示例流程：
// 引入高德地图 JSAPI
<script src="https://webapi.amap.com/maps?v=2.0&key=你的密钥"></script>
// 初始化地图
const map = new AMap.Map('mapContainer', {
center: [lng, lat],
zoom: 15
});
// 添加标记
new AMap.Marker({
position: [lng, lat],
map: map,
title: '我的位置'
});
实现简单导航功能
在地图基础上加入路径规划，即可实现基本导航。大多数地图平台提供路线服务 API：
- 使用驾车、步行或骑行路线规划接口
- 传入起点（用户位置）和终点坐标
- 解析返回结果并在地图上绘制路线
- 可附加距离、耗时、转弯提示等信息展示
高德路径规划示例：
AMap.service('AMap.Driving', function() {
const driving = new AMap.Driving({
map: map,
panel: "routeInfo"
});
driving.search([
{ keyword: '当前起点' },
{ keyword: '目标地点' }
]);
});
基本上就这些。定位加地图展示是前端地理应用的基础，关键是处理好权限请求与错误反馈，确保用户清楚状态。选择合适的地图服务商也很重要，要考虑覆盖范围、加载速度和中文支持。集成时注意 API 调用频率限制和费用模型。安全方面，不要在客户端暴露敏感密钥，尽量通过后端代理关键请求。
