YouTip

HTML5 Geolocation（Geolocation）

\n

---

\n

HTML5 Geolocation（Geolocation） is used to locate the user's position.

\n

---

\n

Locating the User's Position

\n

HTML5 Geolocation API is used to obtain the user's geographical location.

\n

Given that this feature may invade user privacy, unless the user consents, the user's location information is unavailable.

\n

---

\n

Browser Support

\n

\n

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

\n

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

\n

---

\n

Please use getCurrentPosition() method to obtain user's location.

\n

The following example is a simple geolocation instance that returns the longitude and latitude of the user's location:

\n

Example

\n

var x=document.getElementById("demo");\nfunction getLocation(){\nif(navigator.geolocation){\nnavigator.geolocation.getCurrentPosition(showPosition);\n}\nelse{\nx.innerHTML="Geolocation is not supported by this browser.;\n}\n}\nfunction showPosition(position){\nx.innerHTML="Latitude: " + position.coords.latitude +\n"
Longitude: " + position.coords.longitude;\n}\n

\n

Try it »

\n

Instance analysis:

\n

\n
• Detect whether geolocation is supported
\n
• If supported, run the getCurrentPosition() method. If not supported, display a message to the user.
\n
• If getCurrentPosition() runs successfully, return a coordinate object to the function specified in the showPosition parameter
\n
• The showPosition() function gets and displays longitude and latitude
\n

\n

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

\n

---

\n

Error Handling and Rejection

\n

The second parameter of the getCurrentPosition() method is used for error handling. It specifies the function to run when getting the user's location fails:

\n

Example

\n

function showError(error){\nswitch(error.code){\ncase error.PERMISSION_DENIED:\nx.innerHTML="User denied the request for Geolocation.\nbreak;\ncase error.POSITION_UNAVAILABLE:\nx.innerHTML="Position unavailable.\nbreak;\ncase error.TIMEOUT:\nx.innerHTML="The request to get user location timed out.\nbreak;\ncase error.UNKNOWN_ERROR:\nx.innerHTML="Unknown error.\nbreak;\n}\n}\n

\n

Try it »

\n

Error codes:

\n

\n
• Permission denied - User does not allow geolocation
\n
• Position unavailable - Current location cannot be obtained
\n
• Timeout - Operation timed out
\n

\n

---

\n

Displaying Results on Map

\n

To display results on a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

\n

Example

\n

function showPosition(position){\nvar latlon=position.coords.latitude+","+position.coords.longitude;\nvar img_url="http://maps.googleapis.com/maps/api/staticmap?center="\n+latlon+"&zoom=14&size=400x300&sensor=false";\ndocument.getElementById("mapholder").innerHTML="";\n}\n

\n

Try it »

\n

In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a static image).

\n

Google Maps Script

\n

The above link demonstrates how to use scripts to display an interactive map with markers, zoom, and drag options.

\n

---

\n

Information for Given Location

\n

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

\n

Can be used for:

\n

\n
• Updating local information
\n
• Showing points of interest around the user
\n
• Interactive vehicle navigation system (GPS)
\n

\n

---

\n

getCurrentPosition() Method - Returned Data

\n

If successful, the getCurrentPosition() method returns an object. The latitude, longitude, and accuracy properties are always returned. If available, other properties below will be returned.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Property	Description
coords.latitude	Latitude in decimal degrees
coords.longitude	Longitude in decimal degrees
coords.accuracy	Location accuracy
coords.altitude	Altitude, in meters above sea level
coords.altitudeAccuracy	Altitude accuracy of the location
coords.heading	Direction, in degrees from true north
coords.speed	Speed, in meters per second
timestamp	Date/time of the response

\n

---

\n

Geolocation Object - Other Interesting Methods

\n

watchPosition() - Returns the user's current location and continues to return updated locations as the user moves (like GPS in a car).

\n

clearWatch() - Stops the watchPosition() method

\n

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

\n

Example

\n

var x=document.getElementById("demo");\nfunction getLocation(){\nif(navigator.geolocation){\nnavigator.geolocation.watchPosition(showPosition);\n}\nelse{\nx.innerHTML="Geolocation is not supported by this browser.;\n}\n}\nfunction showPosition(position){\nx.innerHTML="Latitude: " + position.coords.latitude +\n"
Longitude: " + position.coords.longitude;\n}\n

\n

Try it »