Web Geolocation API
JavaScript基础 2022-04-25 01:52:55小码哥的IT人生shichen
Web Geolocation API
定位用户的位置
HTML Geolocation API 用于获取用户的地理位置。
由于这可能会损害隐私，除非用户批准，否则位置不可用。
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>如何访问 ABBR 元素的演示</h3>
<p>The <abbr id="myAbbr" title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>单击按钮可获取“WHO”的缩写。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAbbr").title;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：地理定位对于带有 GPS 的设备（如智能手机）最为准确。
所有浏览器都支持 Geolocation API：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| 支持 | 支持 | 支持 | 支持 | 支持 |
注释：从 Chrome 50 开始，Geolocation API 将仅适用于安全上下文，例如 HTTPS。如果您的站点托管在非安全源（例如 HTTP）上，则获取用户位置的请求将不再起作用。
使用 Geolocation API
getCurrentPosition() 方法用于返回用户的位置。
下面的例子返回用户位置的纬度和经度：
示例代码：
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Geolocation API</h1>
<p>请单击按钮以获取您的坐标。</p>
<button onclick="getLocation()">试一试</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
- 检查是否支持 Geolocation
- 如果支持，请运行 getCurrentPosition() 方法。如果没有，则向用户显示一条消息
- 如果 getCurrentPosition() 方法成功，则返回一个 coordinates 对象给参数 (showPosition) 中规定的函数
- showPosition() 函数输出纬度和经度
上面的例子是一个非常基本的地理定位脚本，没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。如果无法获取用户的位置，它规定要运行的函数：
示例代码：
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Geolocation API</h1>
<p>单击按钮以获取您的坐标。</p>
<button onclick="getLocation()">试一试</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在地图中显示结果
如需在地图中显示结果，您需要访问地图服务，例如 Google 地图。
在下面的例子中，返回的纬度和经度用于在 Google 地图中显示位置（使用静态图像）：
示例代码：
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}Location-specific 信息
此页面演示了如何在地图上显示用户的位置。
Geolocation 对于特定于位置的信息也非常有用，例如：
- 最新的本地信息
- 显示用户附近的兴趣点
- 逐向导航（Turn-by-turn navigation）(GPS)
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。会始终返回纬度、经度和精度属性。如果可用，则返回其他属性：
| 属性 | 返回 |
|---|---|
| coords.latitude | 以十进制数表示的纬度（始终返回）。 |
| coords.longitude | 以十进制数表示的经度（始终返回）。 |
| coords.accuracy | 位置精度（始终返回）。 |
| coords.altitude | 平均海平面以上的高度（以米计）（如果可用则返回）。 |
| coords.altitudeAccuracy | 位置的高度精度（如果可用则返回）。 |
| coords.heading | 从北顺时针方向的航向（如果可用则返回）。 |
| coords.speed | 以米/秒计的速度（如果可用则返回）。 |
| timestamp | 响应的日期/时间（如果可用则返回）。 |
Geolocation 对象 - 其他有趣的方法
Geolocation 对象还有其他有趣的方法：
watchPosition()- 返回用户的当前位置，并随着用户移动（如汽车中的 GPS）继续返回更新的位置。clearWatch()- 停止 watchPosition () 方法。
下面的例子展示了 watchPosition() 方法。你需要准确的 GPS 设备来测试（比如智能手机）：
示例代码：
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Geolocation API</h1>
<p>单击按钮以获取您的坐标。</p>
<button onclick="getLocation()">试一试</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
