HTML5 Geolocation Principle and Application

Geolocation isHTML5This feature allows you to develop location-based applications. This article introducesHTML5The basic principle of location and the data precision of Each browser.

Before accessing location information, the browser will ask users whether to share their location information. Take Chrome as an example. If you allow Chrome to share your location with the website, chrome will send local network information to Google location service to estimate your location. Then, the browser will share your location with the website requesting your location.

HTML5 Geolocation API is very simple to use. The basic calling method is as follows:

If (navigator. geolocation) {navigator. geolocation. getCurrentPosition (locationSuccess, locationError, {// indicates that the browser obtains a high-precision location. The default value is falseenableHighAcuracy: true. // specify the time-out time for obtaining the geographic location. The default value is unlimited, the Unit is millisecond timeout: 5000, // The maximum validity period. This parameter specifies how long it takes to obtain the location again when you obtain the location again. MaximumAge: 3000});} else {alert ("Your browser does not support Geolocation! ");}

LocationError is a callback function that fails to get location information. You can follow the Error Type prompts:

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 this to work.');break;case error.UNKNOWN_ERROR:showError('An unknown error occured!');break;}}

LocationSuccess is a callback function that successfully obtains location information. The returned data contains information such as longitude and latitude. Combined with the Google Map API, the location information of the current user can be displayed on the Map, as shown below:

LocationSuccess: function (position) {var coords = position. coords; var latlng = new google. maps. latLng (// dimension coords. latitude, // coords precision. longpolling); var myOptions = {// map magnification zoom: 12, // map center is set to the specified coordinate center: latlng, // map type mapTypeId: google. maps. mapTypeId. ROADMAP}; // create a map and output it to the page var myMap = new google. maps. map (document. getElementById ("map"), myOptions); // create a tag named var marker = new google. maps. marker ({// specify the coordinate point position of the specified longitude and latitude: latlng, // specify the map for the annotation: myMap}); // create the annotation window var infowindow = new google. maps. infoWindow ({content: "Here <br/> latitude:" + coords. latitude + "<br/> longitude:" + coords. longpolling}); // open the infowindow in the annotation window. open (myMap, marker );}

After testing, the location information obtained by the Chrome, Firefox, Safari, and Opera browsers is the same. It is estimated that the location information is the same service and the data is as follows:

 

 

The data obtained by IE is different from that obtained by the previous browsers. The data is as follows:

 

 

The local network information used to estimate your location includes: Information about visible Wi-Fi access points (including signal strength), information about your local router, and the IP address of your computer. The accuracy and coverage of the location service vary depending on the location.

In general, in the PC browserHTML5The Location Accuracy Obtained by the geographic location function is not high enough. If we use this HTML5 feature to make a city weather forecast, it is more than enough, but if it is a map application, the error is too large. HoweverHTML5Application. You can set the enableHighAcuracy parameter to true and call the GPS location of the device to obtain high-precision geographic location information.

 

You may also like

 

• 35 outstanding HTML5-based web games
• Exquisite HTML5 personal portfolio website
• 20 amazing HTML5 Canvas applications
• We recommend 7 amazing HTML5 video players
• 12 amazing HTML5 and CSS3 application examples

 

Link: HTML5 Geolocation principle and Accuracy

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources