HTML5 How to use HTML geo-location correctly?

There is no doubt that HTML5 is a hot topic for developers. If you need to quickly understand the fundamentals of HTML5 's functionality, this chapter explains HTML5 's geographic location.

Geo-targeting uses of HTML5

HTML5 geolocation (geolocation) is used to locate the user's location.

Locate the user's location

The HTML5 geolocation API is used to obtain the user's geographic location.

Since this feature may infringe the privacy of the user, the user location information is not available unless the user consents.

Browser support

Internet Explorer 9, Firefox, Chrome, Safari, and Opera support geo-targeting.

Note: geo-positioning is more accurate for devices with GPS, such as the IPhone.

HTML5-Using geo-positioning

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

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

Here are some examples:

<script>var X=document.getelementbyid ("demo"), function getLocation ()  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition (showposition);    }  Else{x.innerhtml= "Geolocation is not supported by this browser.";}  function showposition (position)  {  x.innerhtml= "Latitude:" + position.coords.latitude +  "<br/> Longitude: "+ position.coords.longitude;  } </script>

Example Explanation:

Detect whether geo-targeting is supported

If supported, run the GetCurrentPosition () method. If not supported, a message is displayed to the user.

If GetCurrentPosition () runs successfully, returns a coordinates object to the function specified in the parameter showposition

The Showposition () function obtains and displays the longitude and latitude

The above example is a very basic geo-location script that does not contain error handling.

Handling Errors and rejections

The second parameter of the GetCurrentPosition () method is used to handle the error. It specifies the function that runs when the user location fails to get:

There is one more example:

function ShowError (Error)  {  switch (error.code)    {case    error. Permission_denied:      x.innerhtml= "User DENIED the request for geolocation."      break;    Case error. Position_unavailable:      x.innerhtml= "location information is unavailable."      break;    Case error. TIMEOUT:      x.innerhtml= "The request to get user location timed out."      break;    Case error. Unknown_error:      x.innerhtml= "An UNKNOWN ERROR occurred."      break;    }  }

Error code:

Permission denied-user does not allow geo-location

Position unavailable-Unable to get current position

Timeout-operation timed out

Show results in map

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

There are also 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 " ;d Ocument.getelementbyid ("Mapholder"). Innerhtml= " ';}

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

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

Information for a given location

This page shows you how to display the user's location on a map. However, geo-positioning is also useful for information at a given location.

Update local Information

Show points of interest around users

Interactive car navigation system (GPS)

GetCurrentPosition () Method-return data

If successful, the GetCurrentPosition () method returns the object. Latitude, longitude, and accuracy properties are always returned. If available, the other properties below are returned.

Properties and Description:

Coords.latitude (Latitude of decimal number)

Coords.longitude (Longitude of decimal number)

Coords.accuracy (positional accuracy)

Coords.altitude (elevation above sea level to meters)

Coords.altitudeaccuracy (altitude accuracy of the position)

Coords.heading (direction, starting from north in degrees)

Coords.speed (speed, measured in meters per second)

Timestamp (date/time of response)

Geolocation objects-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 the Watchposition () method. You need an accurate GPS device to test this example (e.g., iPhone):

There are examples to prove:

<script>var X=document.getelementbyid ("demo"), function getLocation ()  {  if (navigator.geolocation)    {    navigator.geolocation.watchPosition (showposition);    }  Else{x.innerhtml= "Geolocation is not supported by this browser.";}  function showposition (position)  {  x.innerhtml= "Latitude:" + position.coords.latitude +  "<br/> Longitude: "+ position.coords.longitude;  } </script

"Recommended"

The development history of HTML and HTML5

HTML base element that gives you 0 basic learning HTML