首先通过HTML5 Geolocation获取用户坐标，再结合高德地图API渲染地图并标记位置。1. 在HTTPS环境下调用navigator.geolocation.getCurrentPosition()获取经纬度；2. 引入高德地图SDK，使用AMap.Map初始化地图，AMap.Marker添加位置标记；3. 处理权限拒绝、服务不可用等错误提示；4. 可扩展watchPosition实时追踪、逆地理编码转地址等功能。需注意用户体验与权限引导。
要在HTML5中使用Geolocation和地图API显示当前位置，核心是结合浏览器的地理定位功能与第三方地图服务（如高德、百度或Google Maps）。整个过程包括获取用户位置、调用地图API渲染地图并标记位置。
1. 使用HTML5 Geolocation获取当前位置
HTML5的Geolocation API允许网页请求用户的地理位置。需要确保页面在安全上下文（HTTPS）下运行，否则可能无法获取权限。
基本代码如下：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
// 将坐标传给地图初始化函数
initMap(lat, lng);
},
function(error) {
console.error("定位失败:", error.message);
}
);
} else {
console.log("您的浏览器不支持地理定位");
}
2. 集成地图API显示位置（以高德地图为例）
高德开放平台提供JavaScript API，适合国内项目。需先在官网注册账号并获取Key。
立即学习“前端免费学习笔记（深入）”；
引入高德地图JS SDK：
初始化地图并在当前位置添加标记：
function initMap(lat, lng) {
const map = new AMap.Map('mapContainer', {
zoom: 15,
center: [lng, lat]
});
new AMap.Marker({
map: map,
position: [lng, lat],
title: '当前位置'
});
}
记得在HTML中预留地图容器：
3. 处理权限与错误情况
用户可能拒绝定位请求，或设备无GPS信号。应在前端友好提示：
- error.code === 1：用户拒绝授权，提示“请允许位置访问以查看当前位置”
- error.code === 2：定位服务不可用，提示“无法连接到定位服务”
- error.code === 3：超时，可尝试重新加载
4. 实际应用建议
LBS服务集成不只是显示一个点。可以扩展功能：
- 持续监听位置变化：使用
navigator.geolocation.watchPosition() - 逆地理编码：将坐标转为具体地址（高德API提供
AMap.Geocoder） - 路线规划、周边搜索等，增强实用性
基本上就这些。关键在于先拿到坐标，再交给地图渲染。只要权限处理得当，地图API文档清晰，集成并不复杂但容易忽略用户体验细节。
