HTML5 Location Location (HTML5 geolocation) principle and application

Location (geolocation) is HTML5One of the important features that provide the ability to determine the location of a user, which enables the development of applications based on location information.

Today's article introduces you to the basic principles of HTML5 location positioning and the data accuracy of each browser.

Before visiting the location information, the browser asks the user if they want to share their location information, as in the case of Chrome, if you agree to share your location with the site, Chrome will send the local network information to Google location services and anticipate where you are.

The browser then shares your location with the site where you are requesting to use your location.

The HTML5 geolocation API is easy to use, with basic invocation methods such as the following:

if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition (locationsuccess, locationerror,{        // Instructs the browser to obtain a high-precision location. Defaults to False        enablehighacuracy:true,        //Specifies the time-out period for obtaining geolocation, and is not limited by default. The unit is        in milliseconds timeout:5000,        //maximum validity, and when the location is repeatedly acquired, this number specifies how often to get the location again.        maximumage:3000    });} else{    alert ("Your browser does not support geolocation!");}

Locationerror the callback function that failed to get the location information. Ability to prompt information based on error type:

Locationerror:function (Error) {    switch (error.code) {case        error. TIMEOUT:            showerror ("A timeout occured! Please try again! ");            break;        Case error. Position_unavailable:            showerror (' We can\ ' t detect your location. Sorry! ');            break;        Case error. Permission_denied:            showerror (' Please allow geolocation access for the work. ');            break;        Case error. Unknown_error:            showerror (' An UNKNOWN ERROR occured! ');            break;    }}

Locationsuccess is the callback function that obtains the location information, including the latitude and longitude information in the returned data. With the Google Map API, you can display the current user's location in the map. For example, the following:

locationsuccess:function (position) {var coords = position.coords;       var latlng = new Google.maps.LatLng (//Dimension coords.latitude,//precision coords.longitude); var myoptions = {//Map magnification zoom:12,//Map center set to the specified coordinate point center:latlng,/       /map Type MapTypeId:google.maps.MapTypeId.ROADMAP};       Create map and output to page var myMap = new Google.maps.Map (document.getElementById ("map"), myoptions); Create tag var marker = new Google.maps.Marker ({//callout specified latitude and longitude coordinate point position:latlng,//Specify for    Annotated map Map:mymap}); Create a callout form var Infowindow = new Google.maps.InfoWindow ({content: "You are here <br/> Latitude:" + coords.       Latitude+ "<br/> Longitude:" +coords.longitude});  Open the callout form infowindow.open (Mymap,marker); }

After testing, the location information obtained by the Chrome/firefox/safari/opera four browsers is a touch of the same. are expected to be used in the same location service, data such as the following:

And the Internet Explorer and the above several browsers to obtain the same data. Data such as the following:

Location services are used to anticipate the local network information in your location including information about the visible WiFi access point (including signal strength), information about your local router, and the IP address of your computer. Location services vary in accuracy and coverage depending on location.

Overall. The location accuracy of HTML5 in the browser of the PC is not high enough, assuming that a city weather forecast with this HTML5 feature is more than sufficient. But the assumption is to do a map application. The error is still too big. Just assume that the HTML5 app on the mobile device can get high-precision geolocation information by setting the Enablehighacuracy parameter to True to invoke the device's GPS location.

HTML5 Location Location (HTML5 geolocation) principle and application