The HTML5 Geolocation API is used to obtain the user's geographic location.
Since this feature may violate user privacy, user location information is not available unless the user agrees.
HTML5--use geolocation
Use the getCurrentPosition() method to get the user's position.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Self-selected course (such as about Zhihui.com)</title>
</head>
<body >
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="This browser does not support obtaining geographic location.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>
Example analysis:
- Check if geolocation is supported
- If supported, run the getCurrentPosition() method. If not supported, display a message to the user.
- If getCurrentPosition() runs successfully, it returns a coordinates object to the function specified in the parameter showPosition
- The showPosition() function gets and displays the longitude and latitude
Handling errors and rejections
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Self-selected course (such as about Zhihui.com)</title>
</head>
<body >
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else
{
x.innerHTML="This browser does not support obtaining geographic location.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error)
{
switch(error)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied request for geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is not available.";
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown error.";
break;
}
}
</script>
</body>
</html>
error code:
- Permission denied - user is not allowed to geolocate
- Position unavailable - Unable to get current position
- Timeout - the operation timed out
Show results in map
To display results in a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Self-selected course (such as about Zhihui.com)</title>
</head>
<body >
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else
{
x.innerHTML="This browser does not support obtaining geographic location.";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude + "," + position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML=<img src='"+img_url+"';
}
function showError(error)
{
switch(error)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied request for geolocation.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is not available.";
break;
case error.TIMEOUT:
x.innerHTML="Request user geolocation timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown error.";
break;
}
}
</script>
</body>
</html>
getCurrentPosition() method -- return data
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
Geolocation objects -- other interesting methods
watchPosition()---returns the user's current position, and continues to return to the updated position when the user moves;
clearPosition ()---stop watchPosition() method
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Self-selected course (such as about Zhihui.com)</title>
</head>
<body >
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition, showError);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
var latlon=position.coords.latitude + "," + position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML=<img src='"+img_url+"';
}
function showError(error)
{
switch(error)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。";
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误.";
break;
}
}
</script>
</body>
</html>