javascript
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯前端获取经纬度 - 无需第三方服务</title>
<style>
:root {
--primary: #4361ee;
--secondary: #3f37c9;
--success: #4cc9f0;
--light: #f8f9fa;
--dark: #212529;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--radius: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--dark);
}
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
}
h1 {
font-size: 2.5rem;
color: var(--secondary);
margin-bottom: 10px;
font-weight: 700;
letter-spacing: -0.5px;
}
.subtitle {
color: #5a67d8;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.card {
background: white;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 25px;
transition: transform 0.3s ease;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
}
.card-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.card-title i {
background: var(--primary);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.btn {
background: var(--primary);
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 6px rgba(67, 97, 238, 0.2);
}
.btn:hover {
background: var(--secondary);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(67, 97, 238, 0.25);
}
.btn:active {
transform: translateY(0);
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
box-shadow: none;
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.btn:disabled {
background: #adb5bd;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.controls {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.result-area {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
border-left: 4px solid var(--success);
display: none;
}
.coordinates {
font-family: monospace;
font-size: 1.2rem;
background: white;
padding: 15px;
border-radius: 8px;
margin-top: 10px;
border: 1px solid #e2e8f0;
word-break: break-all;
}
.map-container {
height: 300px;
margin-top: 20px;
border-radius: 8px;
overflow: hidden;
background: #e9ecef;
display: none;
position: relative;
}
.map-placeholder {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #6c757d;
flex-direction: column;
gap: 10px;
}
.status {
padding: 12px 15px;
border-radius: 8px;
margin-top: 15px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.status.info {
background: #e3f2fd;
color: #0d47a1;
}
.status.success {
background: #e8f5e9;
color: #1b5e20;
}
.status.error {
background: #ffebee;
color: #b71c1c;
}
.form-group {
margin-top: 15px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #495057;
}
input {
width: 100%;
padding: 12px 15px;
border: 2px solid #dee2e6;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 25px;
}
.feature {
background: white;
padding: 20px;
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
}
.feature i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 15px;
display: block;
}
.feature h3 {
margin-bottom: 10px;
color: var(--secondary);
}
.feature p {
font-size: 0.95rem;
color: #6c757d;
line-height: 1.5;
}
.permission-note {
background: #fff8e1;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #ffc107;
margin-top: 15px;
font-size: 0.95rem;
line-height: 1.5;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 4px solid rgba(67, 97, 238, 0.1);
border-left-color: var(--primary);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
footer {
text-align: center;
margin-top: 40px;
color: #6c757d;
font-size: 0.9rem;
}
@media (max-width: 600px) {
h1 {
font-size: 2rem;
}
.card {
padding: 20px;
}
.controls {
flex-direction: column;
}
.btn {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>纯前端获取经纬度</h1>
<p class="subtitle">使用浏览器原生Geolocation API，无需任何第三方服务，安全可靠</p>
</header>
<main>
<div class="card">
<h2 class="card-title"><i>📍</i> 获取您的位置信息</h2>
<p>点击下方按钮，浏览器将请求您的位置权限。获取成功后，您将看到精确的经纬度坐标。</p>
<div class="permission-note">
<strong>注意：</strong> 此功能需要您的明确授权，并且仅在安全上下文（HTTPS）中可用。本地开发环境（localhost）通常允许使用。
</div>
<div class="controls">
<button id="getLocation" class="btn">
<span>🔍</span> 获取当前位置
</button>
<button id="showMap" class="btn btn-outline" disabled>
<span>🗺️</span> 在地图中查看
</button>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>正在获取位置信息，请稍候...</p>
</div>
<div class="status" id="status"></div>
<div class="result-area" id="result">
<h3>您的位置坐标：</h3>
<div class="coordinates" id="coordinates"></div>
<div id="accuracy"></div>
</div>
<div class="map-container" id="mapContainer">
<div class="map-placeholder">
<span>🗺️</span>
<span>地图加载中...</span>
</div>
</div>
</div>
<div class="card">
<h2 class="card-title"><i>⌨️</i> 手动输入坐标</h2>
<p>如果无法自动获取位置，您可以手动输入坐标：</p>
<div class="form-group">
<label for="manualLat">纬度 (Latitude):</label>
<input type="number" id="manualLat" placeholder="例如: 39.9042" step="0.000001">
</div>
<div class="form-group">
<label for="manualLng">经度 (Longitude):</label>
<input type="number" id="manualLng" placeholder="例如: 116.4074" step="0.000001">
</div>
<div class="controls">
<button id="showManualMap" class="btn">
<span>🗺️</span> 在地图中查看
</button>
</div>
</div>
<div class="features">
<div class="feature">
<i>🔒</i>
<h3>完全本地化</h3>
<p>所有处理都在浏览器中完成，无需将数据发送到任何服务器</p>
</div>
<div class="feature">
<i>⚡</i>
<h3>快速高效</h3>
<p>使用浏览器原生API，无需加载额外库或服务</p>
</div>
<div class="feature">
<i>🛡️</i>
<h3>隐私保护</h3>
<p>用户授权后才可获取位置，符合现代隐私标准</p>
</div>
</div>
</main>
<footer>
<p>使用浏览器原生Geolocation API实现 | 纯前端解决方案</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const getLocationBtn = document.getElementById('getLocation');
const showMapBtn = document.getElementById('showMap');
const showManualMapBtn = document.getElementById('showManualMap');
const statusDiv = document.getElementById('status');
const resultDiv = document.getElementById('result');
const coordinatesDiv = document.getElementById('coordinates');
const accuracyDiv = document.getElementById('accuracy');
const mapContainer = document.getElementById('mapContainer');
const loadingDiv = document.getElementById('loading');
const manualLat = document.getElementById('manualLat');
const manualLng = document.getElementById('manualLng');
let currentLat = null;
let currentLng = null;
let mapLoaded = false;
// 检查浏览器是否支持Geolocation API
if (!navigator.geolocation) {
showStatus('您的浏览器不支持地理定位功能。请使用现代浏览器（如Chrome、Firefox、Safari等）', 'error');
getLocationBtn.disabled = true;
}
// 获取位置按钮点击事件
getLocationBtn.addEventListener('click', () => {
// 重置状态
resetUI();
showStatus('正在请求位置权限，请允许浏览器访问您的位置...', 'info');
loadingDiv.style.display = 'block';
// 调用Geolocation API
navigator.geolocation.getCurrentPosition(
// 成功回调
(position) => {
loadingDiv.style.display = 'none';
currentLat = position.coords.latitude;
currentLng = position.coords.longitude;
const accuracy = position.coords.accuracy;
// 显示结果
coordinatesDiv.textContent = `纬度: ${currentLat}, 经度: ${currentLng}`;
accuracyDiv.innerHTML = `<small>精度: ±${accuracy}米 | 海拔: ${position.coords.altitude ? position.coords.altitude + '米' : '未知'}</small>`;
resultDiv.style.display = 'block';
showMapBtn.disabled = false;
showStatus('位置获取成功！坐标已显示在下方。', 'success');
},
// 错误回调
(error) => {
loadingDiv.style.display = 'none';
let errorMessage = '';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = '您拒绝了位置请求。请在浏览器设置中允许位置访问。';
break;
case error.POSITION_UNAVAILABLE:
errorMessage = '位置信息不可用。请检查设备定位设置。';
break;
case error.TIMEOUT:
errorMessage = '获取位置超时。请稍后重试。';
break;
default:
errorMessage = '发生未知错误。';
break;
}
showStatus(errorMessage, 'error');
},
// 配置选项
{
enableHighAccuracy: true, // 请求高精度定位
timeout: 10000, // 10秒超时
maximumAge: 0 // 不使用缓存位置
}
);
});
// 显示地图按钮点击事件（自动获取的位置）
showMapBtn.addEventListener('click', () => {
if (currentLat && currentLng) {
showMap(currentLat, currentLng);
}
});
// 显示地图按钮点击事件（手动输入的位置）
showManualMapBtn.addEventListener('click', () => {
const lat = parseFloat(manualLat.value);
const lng = parseFloat(manualLng.value);
if (isNaN(lat) || isNaN(lng)) {
showStatus('请输入有效的纬度和经度值', 'error');
return;
}
if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
showStatus('纬度范围应为-90到90，经度范围应为-180到180', 'error');
return;
}
showMap(lat, lng);
showStatus('地图已根据手动输入的坐标加载', 'success');
});
// 显示地图函数
function showMap(lat, lng) {
// 使用OpenStreetMap嵌入地图（免费服务）
const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${lng-0.01}%2C${lat-0.01}%2C${lng+0.01}%2C${lat+0.01}&layer=mapnik&marker=${lat}%2C${lng}`;
mapContainer.innerHTML = `<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="${mapUrl}"></iframe>`;
mapContainer.style.display = 'block';
mapLoaded = true;
// 滚动到地图位置
mapContainer.scrollIntoView({ behavior: 'smooth' });
}
// 显示状态信息
function showStatus(message, type) {
statusDiv.textContent = message;
statusDiv.className = `status ${type}`;
statusDiv.style.display = 'block';
}
// 重置UI状态
function resetUI() {
statusDiv.style.display = 'none';
resultDiv.style.display = 'none';
mapContainer.style.display = 'none';
mapContainer.innerHTML = '<div class="map-placeholder"><span>🗺️</span><span>地图加载中...</span></div>';
showMapBtn.disabled = true;
loadingDiv.style.display = 'none';
}
// 检查是否在安全上下文中（HTTPS或localhost）
if (window.isSecureContext === false) {
showStatus('警告：当前不在安全上下文中。位置功能可能无法使用。请通过HTTPS或localhost访问此页面。', 'error');
}
});
</script>
</body>
</html>核心技术原理
Geolocation API 简介
Geolocation API是 HTML5 新增的浏览器原生 API，属于navigator对象的子接口，专门用于获取设备的地理位置信息，无需引入任何外部库，核心特性：
基于设备的 GPS、Wi-Fi、基站等多源数据定位（不同设备优先级不同）；
严格遵循隐私规范，必须经用户主动授权后才能获取位置；
仅在安全上下文（HTTPS 协议或localhost本地环境）中可用（浏览器安全策略要求）。
核心方法说明
代码中核心使用navigator.geolocation.getCurrentPosition()方法，该方法接收三个参数：
成功回调函数：获取位置后触发，参数position包含经纬度、精度、海拔等核心数据；
失败回调函数：处理权限拒绝、定位超时、位置不可用等异常；
配置选项：本文中设置了三个关键配置：
enableHighAccuracy: true：请求高精度定位（若设备支持 GPS，优先使用 GPS 定位，精度可达米级；否则降级为 Wi-Fi / 基站定位）；
timeout: 10000：定位请求超时时间（10 秒），避免页面长时间阻塞；
maximumAge: 0：不使用缓存的位置数据，确保每次获取最新位置。
代码实现亮点解析
完善的异常处理
针对定位过程中可能出现的 4 类异常（权限拒绝、位置不可用、超时、未知错误），通过error.code分类捕获并给出精准提示，提升用户体验：
PERMISSION_DENIED：用户拒绝授权，提示开启浏览器位置权限；
POSITION_UNAVAILABLE：设备定位功能未开启或无可用定位源；
TIMEOUT：定位请求超时，建议重试；
兜底异常：覆盖未知错误，避免页面崩溃。
安全上下文检测
通过window.isSecureContext检测当前环境是否为安全上下文，若为 HTTP 协议（非安全上下文），提前给出警告，避免用户操作后才发现功能不可用。
轻量化地图可视化
无需引入地图 SDK，直接通过 OpenStreetMap 的嵌入式 iframe 实现地图展示：
拼接经纬度参数生成地图 URL，精准定位到目标位置；
控制地图视野范围（bbox参数），确保定位点居中显示；
兼容手动输入坐标的场景，增加输入合法性校验（纬度范围 - 90~90，经度范围 - 180~180）。
应用场景与局限性
适用场景
轻量级本地应用：如个人博客、小型工具类网站的位置展示；
隐私敏感场景：无需将用户位置数据上报后端 / 第三方；
快速原型开发：无需申请第三方 API 密钥，快速验证位置功能。
局限性说明
定位精度依赖设备：无 GPS 的设备（如部分台式机）仅能通过 IP/Wi-Fi 定位，精度约 100-1000 米；
浏览器兼容性：虽然现代浏览器均支持，但 IE11 及以下完全不兼容（需做降级提示）；
地图功能有限：仅支持基础定位展示，无路线规划、POI 查询等高级功能（如需可结合开源地图库如 Leaflet）。
扩展优化建议
增加持续定位功能：使用watchPosition()替代getCurrentPosition()，实现实时跟踪位置变化（如运动类应用）；
兼容处理：对不支持Geolocation API的浏览器，提供 IP 定位（需后端接口）作为降级方案；
坐标格式转换：增加度分秒（DMS）与十进制坐标的互转功能，适配不同场景需求；
隐私增强：增加 "仅本次授权" 提示，明确告知用户位置数据仅本地使用，无数据上报。