首先使用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) 停止监听，避免资源浪费。
基本上就这些。只要处理好权限提示、错误反馈和地图服务商选择，就能实现稳定的位置服务功能。