HTML5 access to Geographic information APIs

HTML5 access to geographic information APIs

In HTML5, you can see how to use the Geolocation API to get the user's geographic information, and if the browser supports it, and the device has positioning capabilities, you can use this set of APIs directly to get information about the current location, which can be applied to the geographic location of the mobile device. A new Geolocation property is added to the Window.navigator object, which can be accessed using the Geolocation API. The Geolocation property in the Window.navigator object has three methods as follows:

The first method is to getcurrentposition the method to obtain the user's current geographic information, which is defined as follows:

GetCurrentPosition (onsuccess,onerror,options);

The first parameter is the callback function that was executed when the current geographic information was successful: The method uses the following:

Navigator.geolocation.getCurrentPosition (function (position)) {
The process of obtaining success;
Parameter position is a geographic object
}

The second parameter is a callback function that fails to get the current geographic information, and if the location information fails, you can use the callback function to prompt the error message to the user, using the following method:


Navigator.geolocation.getCurrentPosition (function (position) {
The process of obtaining success;
Parameter position is a geographic object
},function (Error)) {
Get the deal when the failure occurs;
}



The callback function uses an Error object as an argument that has the following two properties:

Code attribute: The Code property has the following values:

The user rejected the location service (in the case of a property value of 1).

Cannot get location information (in the case of a property value of 2).

Gets the information timeout error (in the case of a property value of 3).

Message property: A string that contains error messages.

To synthesize the above two callback functions, we can write the following code:


Navigator.geolocation.getCurrentPosition (function (position) {
var coords = position.coords;
Get precision
Console.log (Coords.longitude);
Get latitude
Console.log (Coords.latitude);
Gets the precision of longitude or latitude (in meters)
Console.log (coords.accuracy);
},function (Error) {
Bad callback function
Var errortypes = {
1: ' The position service is rejected ',
2: ' Get no location information ',
3: ' Get information timed out '
};
Alert (Errortypes[error.code]);
});



The third parameter of GetCurrentPosition can be omitted, which is optional, and these optional properties are as follows:

Enablehighaccuracy: Whether requires high-precision geographic information, this parameter is set on many devices is not used, because the use of equipment when the need to combine the power of equipment, the specific geographical situation, so you can use the default value of this property;

Timeout: A time-out limit (in milliseconds) for acquiring operations on geographic information, or an error if the geographic information is not obtained within that time;

Maximumage: The valid time, in milliseconds, to cache a geographic location. For example: maximumage:120000 (1 minutes is 60000), if the 10 o'clock full time to obtain a geographical location information, 10:01, Call Navigator.geolocation.getCurrentPosition again to retrieve the geographic information, then the data that is still 10:00 is returned (because the cache is set to a valid time of 2 minutes). The cached geographic information is discarded after this time, attempts to regain geographic information, and if the value is specified as 0, the new geographic information is unconditionally retrieved.

The second approach is: watchposition, which continuously monitors information about the current location, automatically gets it on a regular basis, using the following method:

Watchcurrentposition (onsuccess,onerror,options);

The three parameters of the method are the same as the parameters of the GetCurrentPosition method; The method returns a number that uses the same method as the parameter returned by the SetInterval method in the JavaScript script ; You can use the Clearwatch method to stop monitoring current geographic information. As follows

Clearwatch (Watchid);(stop getting the location information for the current user, which is also the third method);

We can then learn the following properties for the position object:

Latitude: The latitude of the current geographical position;

Longitude: The current geographical location of the longitude;

Altitude: The current location of the Sea-dial height (cannot get null)

Accuracy: the precision (in meters) of the latitude or longitude obtained;

Altitudeaccurancy: The longitude (in meters) of the height of the sea to be obtained;

Speed: The forward speed of the device (in M/s, not available when null)

Timestamp: Time to get geographic information.

Let's take a look at the latitude and longitude of my current company, the following code:


function Get_location () {
if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (function (position) {
Show Geographic Information
var longitude = position.coords.longitude,
latitude = position.coords.latitude;
Showobject (position.coords,0);
},function (Err) {
Error handling
Switch (err.code) {
Case 1:
Alert ("Location service is denied.") ");
Break

Case 2:
Alert ("Location information is temporarily not available.) ");
Break

Case 3:
Alert ("Gets the information timed out.") ");
Break

Default
Alert ("Unknown error.") ");
Break
}
},{
Enablehighaccuracy:true,
MAXIMUMAGE:100,
accuracy:100
})
}else {
Alert ("Your browser does not support the use of HTML5 to obtain geographic information");
}
}
function Showobject (obj,k) {
recursively display obj
if (!obj) {return;}
for (var i in obj) {
if (typeof (Obj[i]!= "Object") obj[i] = = null) {
for (var j = 0; J < K; J + +) {
document.write ("")
}
document.write (i + ":" + obj[i] + "<br/>");
}else {
document.write (i + ":" + "<br/>");
Showobject (obj[i],k+1);
}
}
}
Get_location ();



Screenshot below: