11.37. HTML5 Geolocation

HTML5 Geolocation is used to locate the location of the user.

11.37.1. 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.

11.37.2. Browser support ¶

Internet Explorer 9, Firefox, Chrome, Safari and Opera support Geolocation .

Note: Geolocation is more accurate for devices with GPS, such as iPhone.

11.37.3. 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 a coordinates object
showPosition() function to obtain and display longitude and latitude

The above example is a very basic geolocation script with no error handling.

11.37.4. 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

11.37.5. 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).

11.37.6. 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)

11.37.7. `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

11.37.8. 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;}