- 您好！欢迎来到鲲鹏知舟
HTML5 Geolocation(地理定位)
Geolocation 是最好的 HTML5 API 之一，用于为 Web 应用程序识别用户的地理位置。
HTML5 的这项新功能允许您导航当前网站访问者的经纬度坐标。这些坐标可以通过 JavaScript 捕获并发送到服务器，服务器可以显示您在网站上的当前位置
大多数地理定位服务使用网络路由地址，例如 IP 地址、RFID、WIFI 和 MAC 地址或内部 GPS 设备来识别用户的位置。
提示：要完全理解 Geolocation API 的概念，您必须具备一定的 JavaScript 知识。
用户隐私：
用户的位置是隐私问题，因此geolocation API 通过在获取位置之前征得用户的许可来保护用户的隐私。Geolocation API 发送一个通知提示框，用户可以允许或拒绝，如果用户允许，则只会识别他的位置。
注意：您的浏览器必须支持地理定位才能将其用于 Web 应用程序。虽然大多数浏览器和移动设备都支持 Geolocation API，但该 API 仅适用于 HTTPS 请求。
地理定位对象
Geolocation API 与 navigation.geolocation 对象一起使用。它的只读属性返回一个 Geolocation 对象，该对象标识用户的位置并可以根据用户位置生成自定义结果。
句法：
geo=navigator. geolocation;
如果此对象存在，则您可以获得地理定位服务。
地理定位方法
Geolocation API 使用 Geolocation 接口的三种方法，如下所示：
| 方法 | 描述 |
|---|---|
| getCurrentPosition() | 它识别设备或用户的当前位置并返回带有数据的位置对象。 |
| watchPosition() | 每当设备位置更改时返回一个值。 |
| clearWatch() | 它取消了之前的 watchPosition() 调用 |
检查浏览器支持：
navigator.geolcation 对象的 geolocation 属性有助于确定浏览器对 Geolocation API 的支持。
<!DOCTYPE html>
<html>
<head>
<title>地理定位API</title>
</head>
<body>
<h1>查找您当前的位置</h1>
<button onclick="getlocation()">点击我</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
alert("您的浏览器支持 Geolocation API")
}
else
{
alert("抱歉！您的浏览器不支持")
}
}
</script>
</body>
</html>获取用户当前位置：
要获取用户的当前位置，使用 navigator.geolocation 对象的 getCurrentPosition() 方法。该方法接受三个参数：
成功：获取用户位置的成功回调函数
错误：一个错误回调函数，它将“位置错误”对象作为输入。
options：它定义了获取位置的各种选项。
下面的示例将返回访问者当前位置的经度和纬度。
例子
<!DOCTYPE html>
<html>
<head>
<title>地理定位API</title>
</head>
<body>
<h1>查找您当前的位置</h1>
<button onclick="getlocation()">点击我</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition)
}
else
{
alert("抱歉！您的浏览器不支持")
} }
function showPosition(position){
var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("location").innerHTML = x;
}
</script>
</body>
</html>解释：
首先检查浏览器支持
使用 getCurrentPosition() 获取当前位置
使用 showPosition() 方法获取纬度和经度值，该方法是 getCurrentPosition() 的回调方法。
处理错误和拒绝：使用错误回调函数
getCurrentPosition 的第二个参数是错误回调函数。它是一个可选参数，用于在获取用户位置时处理错误和用户拒绝。
以下是调用错误回调函数的可能选项：
发生未知随机错误
如果用户拒绝共享位置
位置信息不可用
位置请求超时。
例子
<!DOCTYPE html>
<html>
<head>
<title>地理定位API </title>
</head>
<body>
<h1>找到你的当前位置</h1>
<button onclick="getlocation()">Click me</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
function getlocation() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition, showError)
}
else
{
alert("Sorry! your browser is not supporting")
} }
function showPosition(position){
var x = "Your current location is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("location").innerHTML = x;
}
function showError(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("用户拒绝了 Geolocation API 的请求。");
break;
case error.POSITION_UNAVAILABLE:
alert("用户位置信息不可用。");
break;
case error.TIMEOUT:
alert("获取用户位置的请求超时。");
break;
case error.UNKNOWN_ERROR:
alert("发生未知错误。");
break;
}
}
</script>
</body>
</html>在 Google 地图上显示位置
到目前为止，我们已经了解了如何使用纬度和经度值显示您的位置，但这还不够。因此，我们还可以使用此 API 在 Google 地图上显示确切位置。
以下示例显示了使用 Google 地图的位置。
例子
<!DOCTYPE html> <html> <head> <title>地理定位API</title> </head> <body> <h2>在下面的地图中找到您的位置</h2> <button onclick="getlocation();"> Show Position</button> <div id="demo" style="width: 600px; height: 400px; margin-left: 200px;"></div> <script src="https://maps.google.com/maps/api/js?sensor=false";> </script> <script type="text/javascript"> function getlocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPos, showErr); } else{ alert("抱歉！您的浏览器不支持 Geolocation API") } } //Showing Current Poistion on Google Map function showPos(position){ latt = position.coords.latitude; long = position.coords.longitude; var lattlong = new google.maps.LatLng(latt, long); var myOptions = { center: lattlong, zoom: 15, mapTypeControl: true, navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL} } var maps = new google.maps.Map(document.getElementById("demo"), myOptions); var markers = new google.maps.Marker({position:lattlong, map:maps, title:"You are here!"}); } //Handling Error and Rejection function showErr(error) { switch(error.code){ case error.PERMISSION_DENIED: alert("User denied the request for Geolocation API."); break; case error.POSITION_UNAVAILABLE: alert("USer location information is unavailable."); break; case error.TIMEOUT: alert("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: alert("An unknown error occurred."); break; } } </script> </body> </html>
要了解有关 Google Maps JavaScript API 的更多信息，您可以单击以下链接：
https://developers.google.com/maps/documentation/javascript/reference。
位置属性
Geolocation API 的 getCurrentPosition() 方法返回检索用户位置信息的回调方法。此回调方法返回一个位置对象，其中包含所有位置信息并指定不同的属性。它总是返回纬度和经度属性，但下表描述了 Position 对象的一些其他属性。
| 特性 | 描述 |
|---|---|
| coords.latitude | 它以十进制数返回用户位置的纬度。 |
| coords.longitude | 它以十进制数返回用户位置的经度。 |
| coords.altitude | 它以米为单位返回海拔高度（仅在可用时）。 |
| coords.accuracy | 它返回用户位置的准确性。 |
| coords.altitudeAccuracy | 它返回用户位置的高度精度。（如果可供使用的话） |
| coords.heading | 它以从北顺时针的度数返回航向。（如果可供使用的话） |
| coords.speed | 它以米/秒为单位返回速度。（如果可供使用的话）。 |
| timestamp | 它返回数据或响应时间。（如果可供使用的话）。 |
观看当前位置：
如果我们想在用户移动时知道他的位置，并且想要在每个改变的位置准确定位，那么可以通过使用 watchPosition() 回调函数来实现。
该函数具有 getCurrentPosition() 包含的所有三个参数。
句法：
var id = navigator.geolocation.watchPosition(success[, error[, options]])
watchPosition() 方法返回一个 ID，可用于唯一标识用户的位置，该 ID 也可以与 clearWatch() 方法一起使用以停止观看位置。
句法：
navigator.geolocation.clearWatch(id);
支持浏览器
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Geolocation | 5.0 - 49.0 (http) 50.0 (https) | 9.0 | 3.5 | 16.0 | 5.0 |
-
使用社交账号登录,本站支持