HTML5 Geolocation

HTML5 Geolocation API is used to obtain the user's geographical location.

Note: In view of the fact that this feature may violate the user's privacy, the user's location information is not available unless the user agrees. The browser will pop up a reminder when using this feature. frame.

## 1. Several methods of geographical positioning

IP address, GPS, Wifi, GSM/CDMA

2. Geographic location acquisition process

1. The user opens the web page where the geolocation needs to be obtained application.

2. The application requests the geographical location from the browser, and the browser pops up a query asking the user whether to share the geographical location.

3. Assuming the user allows it, the browser queries the relevant information from the device.

4. The browser sends relevant information to a trusted location server, and the server returns the specific geographical location.

3. Browser support

IE9.0+, FF3.5+, Safari5.0+, Chrome5.0+, Opera10.6 + Support geolocation.

Note: For devices with GPS, such as iPhone (IPhone3.0+, Android2.0+), geographical positioning is more accurate.

4. Methods of geographical positioning in HTML5

GeolocationAPI exists in the navigator object and only contains 3 methods:

1. getCurrentPosition //Current position

2. watchPosition //Monitoring position

3.clearWatch //Clear monitoring

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

Instance analysis :

Detect whether geolocation is supported

If supported, run the getCurrentPosition() method. If not supported, a message is displayed to the user.

If getCurrentPosition() runs successfully, a coordinates object is returned to the function specified in the parameter showPosition

The showPosition() function obtains and displays the longitude and latitude

Handling errors and Rejection

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies the function to be run when obtaining the user's location fails:

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denies access to geographical location request. "
" " x .innerHTML="The request for the user's geographical location timed out."

##getCurrentPosition() method - return data

If the position is obtained successfully, the getCurrentPosition() method returns object. The latitude, longitude, and accuracy properties are always returned. If available, the other following properties are returned.

Properties #coords.longitude Longitude as a decimal number coords.accuracy Position accuracy

coords.altitude Altitude, in meters above sea level

coords.altitudeAccuracy Position of Altitude accuracy
coords.heading Direction, in degrees from true north

coords.speed Speed, in meters per second timestamp Date/time of response

You can also get the geographical location (only supported by firefox)

p.address.country country

p.address.region Province

p.address.city City

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>基于浏览器的HTML5查找地理位置</title>  <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script> function getLocation(){ var options={ enableHighAccuracy:true, maximumAge:1000 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //浏览器不支持geolocation } } //成功时 function onSuccess(position){ //返回用户位置 //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; //使用百度地图API //创建地图实例 var map =new BMap.Map("container"); //创建一个坐标 var point =new BMap.Point(longitude,latitude); //地图初始化，设置中心点坐标和地图级别 map.centerAndZoom(point,15); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } } window.onload=getLocation; </script> </head> <body>  <div id="container" style="width:600px;height:600px"></div> </body> </html>

submit Reset Code

Automatic operation

HTML5 Geolocation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]