HTML5 geolocation example explanation

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 9+, Firefox, Chrome, Safari and Opera support Geolocation.

Note: Geolocation is only available for those with GPS Devices, such as the iPhone, have more precise geolocation.

HTML5 - Using geolocation

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

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

Example

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

Example analysis:

Detect whether Support geolocation

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

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

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;
    }
  }

Error code:

Permission denied - User is not allowed to geolocate

Position unavailable - Unable to obtain current location

Timeout - Operation timeout

Display results in the map

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

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=&#39;"+img_url+"&#39; alt="HTML5 geolocation example explanation" >";
}

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 car navigation system (GPS)

getCurrentPosition () Method - Return data

TIf successful, the getCurrentPosition() method returns the object. The latitude, longitude, and accuracy properties are always returned.

Geolocation Object - Other interesting methods

watchPosition() - Returns the user's current location 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 need an accurate GPS device to test this example (such as an iPhone):

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

【Related Recommendations】

1. Special Recommendations ："php Programmer Toolbox" V0.1 version download

2. Free h5 online video tutorial

3. php.cn original html5 video tutorial

The above is the detailed content of HTML5 geolocation example explanation. For more information, please follow other related articles on the PHP Chinese website!