Latest web development tutorials

HTML5 geopositioning

HTML5 Geolocation (geopositioning) used to locate the user's location.


Locate the user's position

HTML5 Geolocation API to get the user's location.

In view of this feature may violate the privacy of users, unless the user agrees otherwise, the user location information is not available.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation (geographical location).

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


HTML5 - Use geo-targeting

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

The following example is a simple geolocation instance, the user can return to the location latitude and longitude:

Examples

var x = document.getElementById ( "demo");
function getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (showPosition);
}
else
{
x.innerHTML = "This browser does not support getting location.";
}
}

function showPosition (position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Longitude:" + position.coords.longitude;
}

try it"

Analysis examples:

  • It is tested for geopositioning
  • If supported, run getCurrentPosition () method. If not, it displays a message to the user.
  • If getCurrentPosition () succeeds, the function to return the parameters specified in a showPosition target coordinates
  • showPosition () function retrieves and displays the latitude and longitude

The above example is a very basic geopositioning script, error-free handling.


Handling Errors and rejected

The second parameter getCurrentPosition () method for handling errors. It specifies when the get function to run when the user's location failed:

Examples

function showError (error)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML = "user declined to get location request."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "location information is not available."
break;
case error.TIMEOUT:
x.innerHTML = "Request user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Unknown error."
break;
}
}

try it"

error code:

  • Permission denied - user is not allowed geopositioning
  • Position unavailable - Unable to get the current position
  • Timeout - The operation timed out

Display results in map

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

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 = '" + img_url + "'>".;
}

try it"

In the above example, we use latitude and longitude data returned by the display position (using static images) on Google Maps.

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


To the information given location

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

Example:

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

getCurrentPosition () method - return data

T if successful, getCurrentPosition () method returns an object. Always returns latitude, longitude and accuracy properties. If available, the following additional property is returned.

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间


Geolocation object - other interesting methods

watchPosition () - Returns the user's current location, and continue to return the updated position (like GPS on a car) when the user moves.

clearWatch () - Stop watchPosition () method

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

Examples

var x = document.getElementById ( "demo");
function getLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition (showPosition);
}
else
{
x.innerHTML = "This browser does not support getting location.";
}
}
function showPosition (position)
{
x.innerHTML = "Lat:" + position.coords.latitude +
"<br> Longitude:" + position.coords.longitude;
}

try it"