How to use the HTML5 geo-location feature

How to use the HTML5 Geo -location feature

With relatively simple JavaScript code, you can create Web applications that determine the user's geographic details, including latitude and longitude, and elevation. Some web apps can even provide navigation by monitoring the user's location over time, including a map system such as the GoogleMaps API.

HTML5 provides a geo-positioning function (geolocation API) to identify user locations, and we can develop location-based applications using this HTML5 feature. This article combined with examples to share how to use HTML5, with the help of Baidu, Google map interface to get users accurate location information.

The positioning function (geolocation) is a new feature of HTML5, so it is only available on modern browsers that support HTML5, especially handheld devices such as the iphone, which is more accurate in geolocation. First we want to check whether the user device browser supports geo-positioning, and if so, get geographic information. Note that this feature may violate the user's privacy, unless the user agrees, otherwise the user location information is not available, so we will be prompted to visit the application to allow geographical positioning, we certainly choose to allow.

?

1 2 3 4 5 6 7 8

function GetLocation () {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition (showposition), ShowError); }else{alert ("Browsers do not support geo-positioning.") "); } }

The code above can know that if the user device supports geolocation, then the GetCurrentPosition () method is run. If the GetCurrentPosition () runs successfully, a coordinates object is returned to the function specified in the parameter showposition, and the second parameter of the GetCurrentPosition () method is used to handle the error That specify the function to run when the user's location fails.

Let's look at the function ShowError (), which provides some error code handling when the user's geography fails:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

function ShowError (Error) {switch (error.code) {case error. Permission_denied:alert ("Location failure, user refusal to request geographic location"); Break Case error. Position_unavailable:alert ("Positioning failure, location information is not available"); Break Case error. Timeout:alert ("Location failed, request get user location timeout"); Break Case error. Unknown_error:alert ("Positioning failure, positioning system failure"); Break } }

Let's look at the function showposition () and call Coords's latitude and longitude to get to the user's latitude and longitude.

?

1 2 3 4 5

function Showposition (position) {var lat = position.coords.latitude;//latitude var lag = position.coords.longitude;//Longitude alert ( ' Latitude: ' +lat+ ', Longitude: ' +lag '; }

Use Baidu Map and Google Map interface to get the user address

Above we understand that the HTML5 geolocation can obtain the latitude and longitude of the user, then we need to do is to turn the abstract latitude and longitude to be readable meaningful real user location information. Fortunately, Baidu Maps and Google Maps provide this interface, we only need to get the latitude and longitude of HTML5 information to the map interface, will return to the user's geographical location, including provincial urban information, and even the streets, building and other detailed geographical information.

We first define the div for the location of the page, defining Id#baidu_geo and Id#google_geo respectively. We just need to modify the key function Showposition (). First look at Baidu map interface interaction, we will latitude and longitude information via Ajax way to send to Baidu map interface, the interface will return the corresponding provincial urban street information. Baidu Map Interface Returns a string of JSON data, we can according to the needs of the information needed to show to Div#baidu_geo. Note that the jquery library is used here, and the jquery library file needs to be loaded first.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22-23

function Showposition (position) {var LatLon = position.coords.latitude+ ', ' +position.coords.longitude; Baidu var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback= renderreverse&location= "+latlon+" &output=json&pois=0 "; $.ajax ({type: "Get", DataType: "Jsonp", Url:url, Beforesend:function () {$ ("#baidu_geo"). html (' positioning ... ');}, Success:fu Nction (JSON) {if (json.status==0) {$ ("#baidu_geo"). HTML (json.result.formatted_address);}, Error:function ( XMLHttpRequest, Textstatus, Errorthrown) {$ ("#baidu_geo"). HTML (latlon+ "address location fetch failed");}); });

Then look at Google Maps interface interaction. Similarly, we will send the latitude and longitude information through the Ajax way to the Google Map interface, the interface will return the corresponding provincial urban street details. The Google Maps interface returns a string of JSON data, which is more detailed than the return of the Baidu map interface, and we can display the required information to Div#google_geo according to demand.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 The 25 26

function Showposition (position) {var LatLon = position.coords.latitude+ ', ' +position.coords.longitude; Google var url = ' http://maps.google.cn/maps/api/geocode/json?latlng= ' +latlon+ ' &LANGUAGE=CN '; $.ajax ({type: "Get", Url:url, Beforesend:function () {$ ("#google_geo"). html (' positioning ... ');}, Success:function (JSON) {if (json.status== ' OK ') {var results = Json.results $.each (results,function (Index,array) {if (index==0) {$ ("#google_geo"). HTML (array[' Formatted_address ']); } }); }, Error:function (XMLHttpRequest, Textstatus, Errorthrown) {$ ("#google_geo"). HTML (latlon+ "address location fetch failed");}); }

The above code will be Baidu map interface and Google Map interface integration into the function showposition (), we can call according to the actual situation. Of course, this is just a simple application, we can based on this simple example to develop a lot of complex applications, suggest using a mobile browser to visit the demo demo.