js实现定位功能实现
使用Geolocation API获取当前位置
浏览器原生提供的Geolocation API是最简单的定位实现方式。通过navigator.geolocation对象调用getCurrentPosition()方法即可获取经纬度坐标：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('纬度:', position.coords.latitude);
console.log('经度:', position.coords.longitude);
},
(error) => {
console.error('定位失败:', error.message);
}
);
} else {
console.error('浏览器不支持Geolocation API');
}持续监听位置变化
对于需要实时追踪的场景（如导航应用），可以使用watchPosition()方法。该方法会持续返回设备位置更新：
const watchId = navigator.geolocation.watchPosition(
(position) => {
console.log('新位置:', position.coords);
},
(error) => {
console.error('监听错误:', error);
},
{ enableHighAccuracy: true, timeout: 5000 }
);
// 停止监听
// navigator.geolocation.clearWatch(watchId);结合地图API显示位置
获取坐标后，通常需要在地图上显示位置。以Google Maps API为例：
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
function initMap(lat, lng) {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat, lng },
zoom: 15
});
new google.maps.Marker({ position: { lat, lng }, map });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>处理权限问题
现代浏览器要求地理位置权限必须通过用户交互触发。最佳实践是将定位代码放在按钮点击事件中：
document.getElementById('locateBtn').addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
position => initMap(position.coords.latitude, position.coords.longitude)
);
});备用定位方案
当GPS不可用时，可以通过IP地址进行粗略定位。第三方服务如ipapi.co提供免费接口：
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
console.log('IP定位结果:', data.city, data.latitude, data.longitude);
});错误处理最佳实践
完整的错误处理应覆盖各种失败情况：
function handlePositionError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert('用户拒绝了位置请求');
break;
case error.POSITION_UNAVAILABLE:
alert('无法获取位置信息');
break;
case error.TIMEOUT:
alert('请求超时');
break;
default:
alert('未知错误');
}
}移动端优化配置
对于移动设备，可以通过配置选项提高定位精度：
const options = {
enableHighAccuracy: true, // 使用GPS等高精度源
maximumAge: 30000, // 缓存位置的最大年龄（毫秒）
timeout: 27000 // 超时时间
};
