HTML5 Geolocation Principle and Application

Geolocation is one of the important features of HTML5. It provides the ability to determine the user location. With this feature, you can develop location-based applications. This article introduces the basic principles of HTML5 location locating and the data accuracy of various browsers.

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 the location where the browser obtains high precision. The default value is false.
EnableHighAcuracy: true,
// Specify the time-out time for obtaining the geographic location. The default time is not limited, in milliseconds.
Timeout: 5000,
// The maximum validity period. This parameter specifies how long 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,
// Accuracy
Coords. longpolling
);
Var myOptions = {
// Map magnification
Zoom: 12,
// Set the map center to the specified coordinate point
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
Var marker = new google. maps. Marker ({
// Mark the coordinates of the specified longitude and latitude
Position: latlng,
// Specify the map for Annotation
Map: myMap www.2cto.com
});
// Create the annotation window
Var infowindow = new google. maps. InfoWindow ({
Content: "Here <br/> latitude:" +
Coords. latitude +
"<Br/> longitude:" + coords. longpolling
});
// Open the annotation window
Infowindow. 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.