首先使用JavaScript的navigator.geolocation获取用户位置，再结合Google Maps或高德地图API将坐标展示在地图上，支持单次定位与持续追踪，需注意权限处理、错误回调及国内地图替代方案的选择。
现代网页应用中，获取用户位置并展示在地图上已成为常见需求。JavaScript 提供了原生的地理定位功能，结合主流地图 API（如 Google Maps、高德地图或 OpenLayers），可以快速实现位置服务功能。
使用 JavaScript 获取用户地理位置
浏览器内置的 navigator.geolocation 接口允许网页请求用户的地理位置信息。调用 getCurrentPosition() 方法即可获取一次定位结果。
基本用法如下：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
// 可将坐标传给地图API显示
},
(error) => {
console.error("定位失败:", error.message);
}
);
} else {
console.log("当前浏览器不支持地理定位");
}
该方法异步执行，成功时返回经纬度、海拔、速度等信息，失败时可通过错误回调处理权限拒绝或超时情况。
立即学习“Java免费学习笔记（深入）”；
集成 Google Maps 显示位置
获取到坐标后，可将其嵌入 Google Maps 实现可视化。需先注册账号并获取 API 密钥。
加载地图的基本步骤：
- 在页面引入 Google Maps JavaScript API 脚本，附带你的密钥
- 创建一个容器元素（如 div）用于承载地图
- 使用 google.maps.Map 初始化地图实例，并设置中心点为用户位置
function initMap(lat, lng) {
const userLocation = { lat: lat, lng: lng };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: userLocation,
});
new google.maps.Marker({
position: userLocation,
map: map,
title: "你的位置",
});
}
将前面获取的经纬度传入此函数，即可在地图上标记当前位置。
使用高德地图替代方案（国内推荐）
在国内环境中，Google Maps 访问受限，推荐使用高德地图 API。其流程类似，但需使用高德提供的 JS API 和 key。
示例代码：
const map = new AMap.Map('container', {
zoom: 15,
center: [lng, lat]
});
new AMap.Marker({
position: [lng, lat],
map: map
});
注意高德 API 坐标系为 GCJ-02，若与其他系统对接需注意坐标转换问题。
增强体验：持续跟踪用户位置
除了单次定位，还可使用 watchPosition() 实现持续追踪，适用于导航类应用。
用法与 getCurrentPosition 类似，但会持续监听位置变化：
const watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
updateMarkerOnMap(latitude, longitude); // 更新地图标记
},
(error) => console.error(error)
);
在适当时候可用 clearWatch(watchId) 停止监听，避免资源浪费。
基本上就这些。只要处理好权限提示、错误反馈和地图服务商选择，就能实现稳定的位置服务功能。
