Home > Developer > Web Develop

HTML5 Development: Location Orientation Guide

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

geo-positioning is one of the most exciting features offered by HTML5.

With relatively simple JavaScript code, you can create Web applications that determine the user's geographic details, including latitude and longitude, and elevation. Some Web applications can even provide navigation by monitoring the movement of the user's location over time, which also combines a map system such as the GoogleMaps API.

As with all HTML5 functions, you can't rely on browsers to provide support. And where the browser provides support, it changes in depth and durability. Essentially, you need to provide an alternative for those users whose browsers cannot provide full support for HTML5.

In this tutorial, we'll look at some basics of creating user location information. In practice, the browser may fetch data from multiple places. For example, it could be a mobile device's GPS data or IP address data on any networked device. However, your code does not need to consider these details, you simply retrieve and use location data.

Html5web page

Use the following code to create a frame for the HTML5 page:

  2. <! doctypehtml>
  4. <html>
  6. <head>
  8. <script>
  10. /*locationfunctionshere*/
  12. </Script>
  14. </head>
  16. <body>
  18. </body>
  20. </html>

We place the JavaScript geolocation function in the location of the page header script, as well as some basic HTML features for testing and demonstrating the feature of the theme area.

HTML presentation Features

Add the following markup to the HTML body section:

    1. <input type= "button"value= "Get location" onclick= "getuserlocation ()"/>
    2. <div id= "locationdata">
    3. Location data here
    4. </div>

Geolocation functions can be called at any time, such as when a page is loaded or when the jQuery document preparation function is combined. For a better demonstration, we use a button to invoke the function and write the location data to the Div features, and the Div features initially have some simple placeholder text.

Get Position function

The GetPosition method is the primary method we use to determine the user's location. Add the following functions in the script area of the page header:

    1. Functiongetuserlocation () {
    2. Checkifthegeolocationobjectissupported,ifsogetposition
    3. if (navigator.geolocation)
    4. Navigator.geolocation.getCurrentPosition (Displaylocation,displayerror);
    5. Else
    6. document.getElementById ("Locationdata"). Innerhtml= "Sorry-yourbrowserdoesn ' tsupportgeolocation!";
    7. }

The function is called when the user taps the button. The code first checks to see if the Navigator's Geolocation object is displayed and the browser supports it if it is displayed. If the Geolocation object is supported, then the code uses it to invoke the GetCurrentPosition method.

The Getcurrerentposition method takes two parameters to indicate a callback function. , a function that is called when geolocation information is fetched, and one that is called when an error is returned.

If the Geolocation object is not supported, then the function simply writes the error message to the page Div feature.

When a site first attempts to retrieve user location data, the user's browser commands them to determine whether they agree to share the data. This function is only executed when the user consents.

Display position function

Next, the function we need to deploy is actually the first parameter in the GetCurrentPosition method call. When the browser receives the function, the user location data is passed to the function. Add the following code after the Getuserlocation function:

    1. Functiondisplaylocation (position) {
    2. /buildtextstringincludingco-ordinatedatapassedinparameter
    3. vardisplaytext= "Userlatitudeis" +position.coords.latitude+ "Andlongitudeis" +position.coords.longitude;
    4. Displaythestringfordemonstration
    5. document.getElementById ("Locationdata"). Innerhtml=displaytext;
    6. }

This code first creates a variable that creates a string in the variable that contains the latitude and longitude data for the positional parameter. The function then writes this information and some informational text to the page. In your own website, you can also use this data for other purposes, rather than just writing pages--for demonstration purposes only.

Error function

Errors may occur when using geo-location devices. For example, users may not agree to share their geolocation data, the browser may not be able to retrieve data, and so on. So we need to add a function to handle the error, using the second function of the GetCurrentPosition method. Add the following functions after the Displaylocation function:

  2. function DisplayError (Error) {
  4. Get a reference to the HTML element ForWriting result
  6. var locationelement =document.getelementbyid ("Locationdata");
  8. Find out which error we have, outputmessage accordingly
  10. Switch (error.code) {
  12. Case error. Permission_denied:
  14. Locationelement.innerhtml= "Permission was denied";
  16. Break
  18. Case error. Position_unavailable:
  20. Locationelement.innerhtml= "Location data not available";
  22. Break
  24. Case error. TIMEOUT:
  26. Locationelement.innerhtml= "Location request Timeout";
  28. Break
  30. Case error. Unknown_error:
  32. Locationelement.innerhtml= "An unspecified error occurred";
  34. Break
  36. Default
  38. Locationelement.innerhtml= "Who knows, what happened ...";
  40. Break
  42. }}

This function retrieves the error message that occurs after the location request is issued. The function first obtains a reference to the page Div feature to write the appropriate error message. This information is adjusted with a swap statement so that it adapts to the special properties of the error.

Consider and choose

The above functions cover the basic points of user location data retrieval. You can use the retrieved location data to display the user's location on the map using the Google Maps API, primarily by creating a data variable in a custom URL and then loading it into the HTML image features of your page.

You can also use the Watchposition method to track the user's location and even the speed at which they move, even though the data is not accurate because it is not from a mobile device's GPS, such as data that might come from a wireless network.

These functions will bring a brighter future for web developers. However, their success not only requires the browser to provide support, but also users like, hardware support.

HTML5 Development: Location Orientation Guide

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html5 game development book web development design foundations with html5 web development and design foundations with html5 busy coder s guide to android development head first android development brain friendly guide exif orientation learning angularjs guide to angularjs development

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More