How to correctly use HTML geolocation in HTML5?

There is no doubt that HTML5 is a hot topic for developers. If you need to quickly understand the basic principles of HTML5 functions, this article mainly explains HTML5 geolocation.

HTML5 geolocation usage

HTML5 Geolocation (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: For devices with GPS, such as iPhone, geolocation is more precise.

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.

Here are examples:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

Explanation of examples:

Detect whether geolocation is supported

If supported, run 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.

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:

There is also an example:

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

Error code:

Permission denied - User is not allowed to geolocate

Position unavailable - Unable to obtain the current position

Timeout - Operation timeout

Display the 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:

Also examples:

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="How to correctly use HTML geolocation in HTML5?" >";
}

In the above example, we use the returned latitude and longitude data in Google Maps Display position (using static image).

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.

Update local information

Display points of interest around the user

Interactive car 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.

Properties and descriptions:

coords.latitude(latitude as a decimal number)

coords.longitude(longitude as a decimal number)

coords.accuracy( Position accuracy)

coords.altitude (elevation, in meters above sea level)

coords.altitudeAccuracy (elevation accuracy of the position)

coords.heading (direction, from True north start in degrees)

coords.speed(speed in meters per second)

timestamp(date/time of response)

Geolocation object - other Interesting method

watchPosition() - returns the user's current position and continues to return the updated position 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):

There are examples to prove:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script

[Related recommendations]

The development history of HTML and HTML5

The basic elements of html, allowing you to learn HTML from scratch

The above is the detailed content of How to correctly use HTML geolocation in HTML5?. For more information, please follow other related articles on the PHP Chinese website!