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