How to use HTML5 geographic positioning

This article will explain in detail how to use the geographic positioning of HTML5, Xiaobian feels very practical, so share it for everyone to do a reference, I hope everyone can gain something after reading this article.

Geolocation is one of the important features of HTML5, providing a function of determining a user location, and can develop location information based on this feature. Today, this article introduces you to the basic principles of HTML5 geographic positioning and data accuracy of each browser.

In front of the access location information, the browser will ask the user to share its location information, take the Chrome browser as an example, if you allow the Chrome browser to share your location, the Chrome browser will go to Google Location The service sends a local network information to estimate your location. The browser then shares your location with the request to use your location.

HTML5 Geolocation API is very simple, basic call mode is as follows:

f (navigator.geLocation) {navigator.geLocation.getCurrentPosition (LocationsUccess, locationerror, {//// Indicates that the browser gets high-precision position, default is false enablehighacuraces: true, / / ​​Specify the timeout time of getting the geographic location, when the default is not limited, the unit is a millisecond Timeout: 5000, // The longest expiration date, when the geographic position is re-acquired, This parameter specifies how long the position is re-acquired again. Maximumage: 3000});} else {Alert (“Your Browser Does Not Support Geolocation!”);}
   LocationError is a callback function that the location information failed can be prompted according to the 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 Geology Access for this to work.’); Break; Case Error.unkNown_ERROR: Showerror (‘An unknown error }cured!’); Break;}}
   LocationsUCcess is a callback function that has successfully obtained location information, and the returned data contains information such as latitude and latitude. Combined with the Google Map API to display the current user's location information in the map, as follows: 

LocationsUccess : function (position) {var coords = POSIption.coords; var latlng = new google.maps.latlng (// dimension coords.latitude, // accurate coords.longitude); var myoptions = {// map magnification zoom: 12, // Map center is set to specify coordinates Point center: latlng, // Map Type MAPTYPEID: Google.maps.mAptypeId.roadMap}; // Create a map and output to page var mymap = new (Document.GtelementByid (“Map”), MyOptions; // Create a tag VAR Marker = New Google.Maps.Marker ({// Taste The Specical Trailer Coordination Position: Latlng, // Specify the map map: mymap} of the label); // Create a label window var Infowindow = New Google.maps.infowindow ({Content: “You are here latitude:” + Coords.latitude + “
 longitude:" + Coords.longItem});// Open the label window Infowindow.Open (MyMap, marker);}  

After the test, the location information acquired by the four browsers in Chrome / Firefox / Safari / Opera is a touch. The same, the estimation is all the same location service, the data is as follows:

The data acquired by the IE browser and the above browser is different, data As shown in:


How to use the geographic positioning of HTML5 is shared here, I hope that the above can help everyone, you can learn more knowledge. . If the article is good, you can share it out to let more people see.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment