HTML5 Geolocation
HTML5 Geolocation is used to locate the location of the user.
Locate the location of the user
HTML5 Geolocation API is used to obtain the user’s geographic location.
In view of the fact that this feature may infringe upon the user’s privacy, the 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 more accurate for devices with GPS, such as iPhone.
HTML5-use geolocation
Please use the getCurrentPosition() method to get the location of the user.
The following example is a simple geolocation example that returns the longitude and latitude of a user’s location:
Example
varx=document.getElementById("demo");functiongetLocation()
{if(navigator.geolocation){navigator.geolocation.getCurrentPosition
(showPosition);}else{x.innerHTML="This browser does not support obtaining geographic locations.";}}
functionshowPosition(position){x.innerHTML="latitude:"+position.coords.
latitude+"<br>longitude:"+position.coords.longitude;}
Instance resolution:
Detect whether geolocation is supported
If supported, run
getCurrentPosition()method. If not, a message is displayed to the user.If
getCurrentPosition()if it runs successfully, it returns acoordinatesobjectshowPosition()function to obtain and display longitude and latitude
The above example is a very basic geolocation script with no error handling.
Handle errors and rejections
getCurrentPosition() the second parameter of the method is used to handle errors. It specifies the function to run when it fails to get the user’s location:
Example
functionshowError(error){switch(error.code)
{caseerror.PERMISSION_DENIED:x.innerHTML=
"The user refused the request to obtain the geographic location."break;caseerror.POSITION_UNAVAILABLE:
x.innerHTML="Location information is not available."break;caseerror.TIMEOUT:x.innerHTML="
Request for user geographic location timeout."break;caseerror.UNKNOWN_ERROR:x.innerHTML="Unknown error."break;}}
Error code:
Permission denied-users do not allow geolocation
Position unavailable-unable to get the current location
Timeout-Operation timed out
Display the results in the map
To display the results in a map, you need to access mapping services that use latitude and longitude, such as Google Maps or Baidu Maps:
Example
functionshowPosition(position){varlatlon=position.coords.latitude+",
"+position.coords.longitude;varimg_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";document.getElementById("mapholder").innerHTML="<img
src='"+img_url+"'>";}
In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a still image).
Information for a given location
This page demonstrates how to display the location of a user on a map. However, geolocation is also useful for information about a given location.
Can be used to:
Update local information
Show the points of interest around the user
Interactive vehicle Navigation system (GPS)
getCurrentPosition() method-return data
If T is successful, then getCurrentPosition() method returns the object. Will always return latitude 、 longitude and accuracy Property. If available, other properties below are returned.
Attribute |
Description |
|---|---|
coords.latitude |
Latitude of decimal number |
coords.longitude |
Longitude of decimal number |
coords.accuracy |
Position accuracy |
coords.altitude |
Above sea level in meters |
coords.altitudeAccuracy |
Altitude accuracy of position |
coords.heading |
Direction, measured in degrees from due north |
coords.speed |
Speed, in meters per second |
Timestamp |
Date / time of response |
Geolocation object-other interesting methods
watchPosition() -returns the user’s current location and continues to return to the updated location when the user moves (just like the GPS on the car).
clearWatch() -stop watchPosition() method
The following example shows watchPosition() Method. You need a precise GPS device to test this example (such as iPhone):
Example
varx=document.getElementById("demo");functiongetLocation()
{if(navigator.geolocation){navigator.geolocation.watchPosition
(showPosition);}else{x.innerHTML="This browser does not support obtaining geographic locations.";}}
functionshowPosition(position){x.innerHTML="latitude:"+position.coords.latitude+"
<br>longitude:"+position.coords.longitude;}