HTML5 Geolocation

HTML5 Geolocation is used to locate the user's location.

Locate the user's location

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

Given that this feature may violate user privacy, user location information is not available unless the user agrees.

Browser support

Internet Explorer

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation.

Note: Geolocation (Geolocation) For devices with GPS, such as iPhone, geolocation is more accurate.

HTML5 - Using geolocation

Please use the getCurrentPosition() method to get the user's location.

The following example is a simple geolocation example that returns the longitude and latitude of the user's location:

Example

<!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>

Run instance»

Click the "Run instance" button to view the online instance

Instance analysis:

Check 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 Longitude and latitude

The above example is a very basic geolocation script without error handling.

Handling errors and rejections

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:

Instance

<!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,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
  }
function showError(error)
  {
  switch(error.code) 
    {
    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>

Run instance»

Click "Run" Instance" button to view online instances

Error code:

Permission denied - User is not allowed to geolocate
## Position unavailable - Unable to obtain the current position
Timeout - Operation timeout

Display the result in the map

such as To display the results on a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</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="该浏览器不支持获取地理位置。";}
  }

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.code) 
    {
    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>

Run Instance»Click the "Run Instance" button to view the online instance

In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a static image).

Google Maps Script
The link above shows you how to use a script to display an interactive map with markers, zoom and drag options.

Information for a given location

This page demonstrates how to display the user's location on the map. However, geolocation is also useful for information about a given location.

Example:

Update local information
Display points of interest around the user
Interactive vehicle navigation system (GPS)

getCurrentPosition() method - return data

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

##timestampDate/time of response

Properties	Description
coords.latitude	Latitude as a decimal number
coords.longitude	Longitude as a decimal number
coords.accuracy	Position accuracy
coords.altitude	Altitude, in meters above sea level
coords.altitudeAccuracy	Altitude accuracy of the location
coords.heading	Direction, in degrees from true north
coords.speed	Speed in meters per second

Geolocation Object - Other interesting methods

watchPosition() - Returns the user's current position and continues to return updated positions as the user moves (like a GPS in a car).

clearWatch() - Stop watchPosition() method

The following example shows the watchPosition() method. You will need an accurate GPS device to test this example (such as an iPhone):

Instance

<!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.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;	
  }
</script>
</body>
</html>

Run Example»Click the "Run Instance" button to view the online instance

← HTML5 drag and drop

HTML5 Video(video) →