HTML5 Get location targeting information

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

How to use the HTML5 location targeting feature

The positioning function (geolocation) is a new feature of the HTML5, so it is more accurate to operate only on modern browsers that support HTML5, especially handheld devices such as the iphone. First we want to detect whether the user device browser supports geolocation, and if so, obtain geographic information. Note that this feature may violate the privacy of the user, unless the user agrees, the user location information is not available, so when we access the app will be prompted to allow geo-location, we certainly choose to allow.

function GetLocation () {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition (showposition, ShowError);} Else{alert ("The browser does not support geo-targeting. ");}}

The above code knows that if the user device supports geolocation, run the GetCurrentPosition () method. If GetCurrentPosition () runs successfully, returns a coordinates object to the function specified in the parameter showposition, and the second parameter of the GetCurrentPosition () method showerror for handling errors , which specifies the function that runs when the user location fails to get.

Let's take a look at function showerror (), which specifies how some error code should be handled when a user's location fails:

function ShowError (Error) {switch (error.code) {case error. Permission_denied:alert ("Location failed, user refused to request geo-location"); Break;case error. Position_unavailable:alert ("Location failed, position information is not available"); Break;case error. Timeout:alert ("Location failed, request get user location timeout"); Break;case error. Unknown_error:alert ("Location failure, location system failure"); break;    }}

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

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 Maps interface to get the user address

We understand that HTML5 's geolocation can get the latitude and longitude of the user, so we need to translate the abstract latitude and longitude into readable and meaningful real user geo-location information. Fortunately, Baidu Maps and Google Maps provide this interface, we only need to HTML5 obtained latitude and longitude information to the map interface, you will return to the location of the user, including the provincial city information, and even the streets, numbers and other detailed geographical location information.

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

function Showposition (position) {var LatLon = position.coords.latitude+ ', ' +position.coords.longitude;//baiduvar url = "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 (' locating ... ');},success:function (JSON) {if (json.status==0) {$ ("#baidu_geo"). HTML (json.result.formatted_ address);}},error:function (XMLHttpRequest, Textstatus, Errorthrown) {$ ("#baidu_geo"). HTML (latlon+ "address location get Failed");});

Then look at Google Maps interface interaction. We also send the latitude and longitude information to the Google Map interface via Ajax, and the interface will return to the corresponding provincial city street details. Google Maps interface returned is also a string of JSON data, these JSON data than Baidu map interface returned to more detailed, we can according to the needs of the information needed to display to Div#google_geo.

function Showposition (position) {var LatLon = position.coords.latitude+ ', ' +position.coords.longitude;//googlevar URL = ' cn/maps/api/geocode/json?latlng= ' +latlon+ ' &LANGUAGE=CN '; $.ajax ({type: "GET", Url:url, Beforesend:function () {$ ("#google_geo"). html (' locating ... ');},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 get Failed");});}

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

HTML5 Get location targeting information