The effect of obtaining geo-location information based on HTML5

How to use the HTML5 geo-location feature

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.

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:

function ShowError (Error) {
Switch (error.code) {
Case error. Permission_denied:
Alert ("Location failed, user refuses to request geographic location");
Break
Case error. Position_unavailable:
Alert ("Positioning failed, location information is not available");
Break
Case error. TIMEOUT:
Alert ("Locate failed, request to 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.

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.

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:function (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.

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.

But then again, if the client's browser does not support HTML5, then this effect is useless oh.