Geolocation is one of the important features of HTML5, which provides the function of determining the location of the user. With this feature, it can develop the application of location information. Today, this article introduces the basic principles of the geographical positioning of HTML5 and the data accuracy of each browser.
Before accessing the location information, the browser will ask the user if it shares its location information. Taking the Chrome browser as an example, if you allow the Chrome browser to share your location with the website, the Chrome browser will send local network information to the Google location service. It is estimated that you are located. The browser then shares your location with the website requesting your location.
HTML5Geolocation API is very simple. The basic call method is as follows:
if (if (Navigator.Geolocation) {navigator.Geology.GetCurrentPosition (local Y: TRUE, // Specify the timeout of the geographical location, the default is not limited, The unit is millisecond: 5000, // The maximum validity period. When the geographical location is repeated, how long does this parameter be obtained again.LocationError is a callback function for obtaining location information failure, which can be prompted according to the error type:
LOCATIONERROR: FUNCTION (Error) {switch (error.code) {case error.timeout: showerror (a timeout! Please try agin!); Navailable: Showerror ('we can/' t detect your local. Sorry! '); Break; Case Error.Permission_Denied: Showerror (' Please Allow Geolocation Access for this to work '); Break; Case error.unknown_error: shower: shower: ror ('An unknown error ion!'); Break;}}LocationSuccess is a recovery function for the successful position information of the location information. The returned data contains information such as latitude and longitude, and combined with the Google Map API to display the location information of the current user in the map, as follows:
LOCATIONSUCCESS: FUNCTION (POSITION) {var coords = positive.coords; var latlng = new google.maps.latlng (// dimension coords.latitude, accuracy Coords.longitude); var myoptions = {// Map magnification zoom: 12, // The center of the map is set to the specified coordinate punctuation center: latlng, // map type mapid: Google.maps.maptypeid.Roadmap}; // Create the map and output to the page var mymap = new Google.maps.map (Document. GetelementByid (MAP), MyOPTIONS); // Create a marker varmarker = new Google.maps.marker ({// label the specified latitude and longitude coordinate position: latlng, // Specify map map: mymap} for labeling); / /Create the labeling window var infowindow = New Google.maps.inFowindow ({Content: You <br/> Stacking:+ Coords.Latital+ <br/> Meridity:+ COORDS.LONGITUDE}); Indow. Open (MyMap, Marker);}After testing, the location information obtained by the four browsers of Chrome/Firefox/Safari/Opera is the same. It is estimated that the same location service is used. The data is as follows:
The data of the IE browser is different from the data obtained by the above browsers. The data is as follows:
Location services are used to estimate that local network information at your location includes: information about wifi access points (including signal strength), information about your local router, and your computer's IP address. The accuracy and coverage of location services vary from position.
In general, the location of the geographical location function of HTML5 in the PC's browser is not high enough. If you 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 still too large Essence However, if it is an HTML5 application on the mobile device, you can set the EnableHighacuracy parameter to TRUE, and call the GPS positioning of the device to obtain high -precision geographical information.