可使用高德地图、百度地图api或纯html5 geolocation api实现定位：高德需申请key并调用amap.geolocation；百度需ak并使用bmapgl.geolocation；原生api无需key但无地图功能，且均需处理权限拒绝、失败及https移动端适配。
如果您在HTML5网页中需要获取用户当前位置并显示在地图上，可以通过调用高德地图或百度地图的JavaScript API实现定位与地图渲染。以下是具体操作步骤：
一、使用高德地图API获取定位与显示地图
高德地图JavaScript API提供AMap.Geolocation插件，可自动获取浏览器支持的GPS、Wi-Fi、基站等多源定位信息，并返回经纬度坐标。需先引入高德SDK并申请Web端Key。
1、前往高德开放平台注册账号，创建应用并获取Web端Key。
2、在HTML文件的
中插入高德JS API引用，替换your_key为实际申请的Key：<script src="https://webapi.amap.com/maps?v=2.0&key=your_key"></script>
立即学习“前端免费学习笔记（深入）”；
3、在页面中添加一个用于承载地图的DOM容器，例如：
4、初始化地图实例并调用定位插件：
const map = new AMap.Map('map', { zoom: 14 });
const geolocation = new AMap.Geolocation();
map.addControl(geolocation);
geolocation.getCurrentPosition();
5、监听定位成功事件，在控制台输出坐标并设置地图中心：
AMap.event.addListener(geolocation, 'complete', (data) => {
console.log(经度： + data.position.lng + ，纬度： + data.position.lat);
map.setCenter([data.position.lng, data.position.lat]);
});
二、使用百度地图API获取定位与显示地图
百度地图JavaScript API通过BMapGL.Geolocation类实现浏览器定位，支持HTML5原生Geolocation API回退机制，兼容性较好。需提前在百度地图开放平台申请AK。
1、登录百度地图开放平台，创建应用并获取浏览器端AK。
2、在HTML文件中引入百度地图SDK，注意必须携带ak参数：
<script src="https://api.map.b<a%20style=" color: text-decoration:underline title="ai" href="https://www.php.cn/zt/17539.html" target="_blank">aidu.com/api?v=1.0&type=webgl&ak=your_ak"></script>
3、添加地图容器元素：
4、创建地图实例并启用定位控件：
const map = new BMapGL.Map('map');
const point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
5、调用定位服务并处理结果：
const geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
const lng = r.point.lng;
const lat = r.point.lat;
console.log(定位成功，经度： + lng + ，纬度： + lat);
map.centerAndZoom(new BMapGL.Point(lng, lat), 15);
} else {
console.log(定位失败： + this.getStatus());
}
});
三、纯HTML5 Geolocation API获取经纬度（无需第三方地图）
若仅需获取用户坐标而不渲染地图，可直接使用浏览器原生navigator.geolocation API，无需申请Key，但不提供地图展示能力。
1、检测浏览器是否支持地理定位：
if (navigator.geolocation) { ... } else { console.log(当前浏览器不支持地理定位); }
2、调用getCurrentPosition方法请求位置信息：
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(HTML5定位成功：纬度 + lat + ，经度 + lng);
},
function(error) {
console.error(定位错误代码： + error.code + ，信息： + error.message);
}
);
3、可选：设置定位选项以提升精度或限制超时：
{ enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
四、处理定位权限拒绝或失败情况
用户可能手动拒绝地理位置授权，或设备无GPS、网络不可用，此时需提供明确反馈并引导重试。
1、监听Geolocation API的error.code值：
当code为1时，表示用户拒绝授权；code为2表示位置不可用；code为3表示请求超时。
2、针对高德API，检查AMap.Geolocation.STATUS_UNKNOWN、STATUS_PERMISSION_DENIED等状态常量。
3、针对百度API，判断BMapGL.Status.PERMISSION_DENIED、BMapGL.Status.TIMEOUT等返回值。
4、在页面中动态插入提示文字：
document.getElementById('tip').innerHTML = 请允许网站获取您的位置信息，或检查设备定位功能是否开启;
五、在移动端适配定位与地图显示
移动端浏览器对Geolocation支持更依赖系统级权限，且需确保页面运行在HTTPS协议下（iOS Safari强制要求），否则定位将被禁用。
1、确认服务器已部署SSL证书，网页URL以https://开头。
2、在meta标签中添加viewport适配声明：
3、高德地图建议启用PC/移动自适应模式：
const map = new AMap.Map('map', {
resizeEnable: true,
features: ['bg', 'road', 'building']
});
4、百度地图启用移动端手势优化：
map.enableDragging();
map.enableInertialDragging();
map.enablePinchToZoom();
