HTML5 geolocation
May 03, 2021 HTML5
Table of contents
1. HTML5 Geolocation (Geolocation).
5. Handle errors and rejections
6. Show the results in the map
7.. Information for a given location
8.. GetCurrentPosition() method - returns data
HTML5 Geolocation (Geolocation).
HTML5 Geolocation (geolocation) is used to locate a user's location.
Geolocation requests a location information, and with the user's consent, the browser returns a location information that contains longhes and dimensions!
Locate the user's location
The HTML5 Geolocation API is used to obtain the user's geographic location.
Because this feature may violate a user's privacy, user location information is not available unless the user consents.
Browser support
Internet Explorer 9 Plus, Firefox, Chrome, Safari and Opera support Geolocation.
Note: Geolocation is more accurate for devices with GPS, such as the iPhone.
HTML5 - Use geolocation
Use the getCurrentPosition() method to get the user's location.
The following example is a simple geolocation instance that returns the longitude and latitude of the user's location:
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
Else {x.innerhtml = "This browser does not support getting a geographic location."
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Try it out . . .
Instance resolution:
- Detect whether geolocation is supported
- If supported, run the getCurrentPosition() method. If not, 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 example above is a very basic geolocation script that does not contain error handling.
Tip: Geolocation location sources can include GPS, IP address, RFID, WIFI and Bluetooth MAC address, as well as GSM/CDMS ID, and so on.
Handle errors and rejections
The second parameter of the getCurrentPosition() method is used to handle errors. It specifies the function that runs when the acquisition of the user's location fails:
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerhtml = "User refuses to obtain a location where the location is obtained."
break;
case error.POSITION_UNAVAILABLE:
x.innerhtml = "location information is not available."
break;
case error.TIMEOUT:
x.innerhtml = "Request user geographic location timeout."
break;
case error.UNKNOWN_ERROR:
x.innerhtml = "Unknown error."
break;
}
}
Try it out . . .
Error code:
- Permission denied - Geolocation is not allowed by the user
- Position unavailable - the current location could not be obtained
- Timeout - The operation timed out
Show the results in the map
To display results in a map, you need access to a map service that uses longitude and latitude, such as Google Maps or Baidu Maps:
{
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+"'>";
}
Try it out . . .
In the example above, we use the returned longitude and latitude data to display the location in Google Maps (using still images).
Google Maps script
The links above show you how to use scripts to display interactive maps with tag, zoom, and drag options.
Information for a given location
This page shows how to display a user's location on a map. However, geolocation is also useful for information about a given location.
Instance:
- Update local information
- Displays points of interest around the user
- Interactive Car Navigation System (GPS)
GetCurrentPosition() method - returns data
If T succeeds, the getCurrentPosition() method returns the object. T he latitude, longitude, and accuracy properties are always returned. If available, other properties below are returned.
| Attributes | describe |
|---|---|
| coords.latitude | Decimal latitude latitude |
| coords.longitude | Decimal number of times |
| coords.accuracy | Positional accuracy |
| coords.altitude | Altitude, above the sea level |
| coords.altitudeAccuracy | Location level of elevation |
| coords.heading | Direction, starting from Zhengbei starting |
| coords.speed | Speed, based on rice / per second |
| timestamp | Response date / time |
Geolocation objects - other interesting ways
WatchPosition() - Returns the user's current location and continues to return the updated location (like GPS on the car) when the user moves.
clearWatch() - Stop watchPosition() method
The following example shows the watchPosition() method. Y ou need an accurate GPS device to test this example (e.g. iPhone):
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
Else {x.innerhtml = "This browser does not support getting a geographic location."
}
function showPosition(position)
{
x.innerhtml = "latitude:" + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
Try it out . . .
We'll cover geolocation in HTML5, and we'll learn about HTML5 video in the next section!