HTML5 programming journey Series 1: A Preliminary Study of HTML5 Geolocation

Let's assume that there is a web application that provides discount information for a nearby mall. You can use the HTML5 Geolocation API to request users to share their location information.

HTML5 Geolocation technology has many application scenarios, such as building a social application of computing distance and GPS navigation.

This article mainly discusses HTML5 Geolocation API, including the way to obtain geographic location data, the privacy of geographic location data, and its practical application.

There are currently two types of geographic location requests: a single location request and a repeated location update request.

1. Acquisition of geographic location data

You can use the following methods to obtain geographic location data:

• IP address location: automatically searches for the user's IP address and then retrieves the registered physical address;
• GPS Geographic Positioning: It is achieved by collecting multiple GPS satellite signals running around the Earth;
• Geographical location of Wi-Fi: Calculated by triangular distance (triangular distance: the distance from the user's current location to multiple known Wi-Fi access points );
• Mobile phone location: determined by the triangular distance from the user to some base stations;
• Custom location: Enter the address, zip code, and other details.

2. geographic location data privacy

The HTML5 Geolocation specification provides a mechanism to protect user privacy. location information cannot be obtained unless explicitly authorized by the user.

HTML5:

Iii. Introduction to HTML5 Geolocation API

Privacy Protection is triggered when you access a page using the HTML5 Geolocation API. However, if you only add code without calling any method, the privacy protection mechanism will not be triggered.

To use the HTML5 Geolocation API, first check whether the browser supports it. The Code is as follows:

function loadDemo(){If(navigator.geolocation){  document.getElementById("support").innerHTML = "HTML5 Geolocation supported.”}else{  ocument.getElementById("support”).innerHTML = "HTML5 Geolocation is not supported in your browser.”  }}

　　

Void getCurrentPosition(in PositionCallback successCallBack,                    in optional PositionErrorCallBack errorCallback,                     in optiona PositionOptions options)

The above functions are called through navigator. geolocation. The parameters are described as follows:

SuccessCallBack: The function called when the browser specifies the location data is available, that is, the location where the actual location information is received and processed. This function only accepts one parameter: Location object, including coordinates and a timestamp;

ErrorCallback: Description of the cause of failure when an error occurs when the location data is obtained. optional parameter. However, it is recommended that you use this parameter;

Options: This object can be used to adjust the data collection method of the HML5 Geolocation service. Optional. It can be passed through a JSON object, it mainly includes enableHighAccuracy (enabling the high-precision mode of the HML5 Geolocation service, timeout (the maximum time allowed by the current location), and maximumAge (the time interval for the browser to recalculate the location ).

Function successCallBack (position) {var latitude = position. coords. latitude; var longpolling = position. coords. longpolling; var accuracy = position. coords. accuracy; // you can add code here to display the preceding three values to the page. } Ffunction errorCallback (error) {switch (error. code) {// UNKNOWN_ERROR = 0 you need to use the message parameter to find more information about the error. case 0: updateStatus ("There was an error while retrieving your location:" + error. message); break; // PERMISSION_DENIED = 1 The user rejects The browser from obtaining its shared location. case 1: updateStatus ("The user prevented this page form retrieving a location! "); Break; // POSITION_UNAVAILABLE = 2 try to get user location, but failed case 2: updateStatus (" The browser was unable to determine your location: "+ error. message); break; // TIMEOUT = 3 sets The optional timeout value and tries to determine the user location. case 3: updateStatus ("The browser timed out before retriveing! "); Break ;}}

Repeated location request API:

Var watchId = navigator. geolocation. watchPosition (updateLocation, handleLocationError); // stop receiving location update information navigator. geolocation. clearWatch (watchId );

　　

4. Use HML5 Geolocation to build an application

Use the HML5 Geolocation API described above to implement a simple and useful Web application-distance tracker to understand the power of HML5 Geolocation.

This example describes the distance from the place where the webpage is loaded to the current location. Using the well-known Haversine formula, we can calculate the distance between two points on the earth based on the latitude and longitude. As follows:

For more information about the above principles, see other online tutorials. The formula for implementing Haversine using js is as follows:

Function toRadians (degree) {return degree * Math. PI/180;} function distance (latitude1, longitude1, latitude1, longitude1) {// R is the earth's radius, in the unit of km var R = 6371; var deltaLatitude = toRadians (latitude2-latitude1); var region = toRadians (longitude2-longitude1); region = toRadians (region); latitude2 = toRadians (latitude2); var a = Math. sin (deltaLatitude/2) * Math. sin (deltaLatitude/2) + Math. cos (latitude1) * Math. cos (latitude2) * Math. sin (deltalongsin/2) * Math. sin (deltalongsin/2); var c = 2 * Math. atan2 (Math. sqrt (a), Math. sqrt (1-a); var d = R * c; return d ;}

HTML webpage code:

<! DOCTYPE html> 
Link to this article: HTML5 programming journey 1st-a preliminary study on HTML5 Geolocation
Via oschina