Html5 geographic location api interface development application summary _ html5 tutorial skills-

HTML5 provides a series of APIS, such as geographic location, for users to easily create LBS geographic applications. First, when you enable the API in a browser that supports HTML5, you will be asked if you agree to use the api. Otherwise, it will not be enabled. There are several methods to ensure secure location: IP address, GPS, Wifi, GSM/CDMA

Geographic location acquisition process:
1. the user opens the web application that needs to obtain the geographical location.
2. When the application requests the geographic location from the browser, the browser pops up and asks whether the user shares the geographic location.
3. Assume that the user permits the browser to query related information from the settings.
4. the browser sends the relevant information to a trusted location server, and the server returns the specific geographic location.

Implementation of HTML5's geographic position:
1. Implement the technology of Obtaining users' geographic location based on the browser (without backend Support)
2. Precise positioning of users' geographical locations (with a precision of up to 10 m and dependent on devices)
3. Continuously track users' geographical locations
4. Interaction with Google Map or Baidu Map to present location information

Geolocation API is used to share the user's current geographic location information to a trusted site, which involves the user's privacy and security issues. Therefore, when a site needs to obtain the user's current geographic location, the browser will prompt "allow" or "deny ".
First, let's look at which browsers support the Geolocation API:
IE9.0 +, FF3.5 +, Safari5.0 +, Chrome5.0 +, Opera10.6 +, IPhone3.0 +, and Android2.0 +
The Geolocation API exists in the navigator object and contains only three methods:

The Code is as follows:

1. getCurrentPosition // Current Position
2. watchPosition // monitoring position
3. clearWatch // clear monitoring
Navigator. geolocation. getCurrentPosition (... , Function (error ){
Switch (error. code ){
Case error. TIMEOUT:
Alert ("connection timed out, please try again ");
Break;
Case error. PERMISSION_DENIED:
Alert ("You refused to use location sharing service, query canceled ");
Break;
Case error. POSITION_UNAVAILABLE:
Alert ("sorry, you cannot provide location service for your planet ");
Break;
}
});

WatchPosition is like a tracker paired with clearWatch.
WatchPosition and clearWatch work a bit like setInterval and clearInterval.
Var watchPositionId = navigator. geolocation. watchPosition (success_callback, error_callback, options );
Navigator. geolocation. clearWatch (watchPositionId );

HTML 5 provides a series of APIS, such as geographic location, for users to easily create LBS geographic applications. First, in browsers that support HTML 5, when the API is enabled, it will ask if the user agrees to use the api, otherwise it will not be enabled to ensure security.
1. Enable and determine whether the browser supports the LBS api

The Code is as follows:

Function isGeolocationAPIAvailable ()
{
Var location = "No, Geolocation is not supported by this browser .";
If (window. navigator. geolocation ){
Location = "Yes, Geolocation is supported by this browser .";
}
Alert (location );
}

In the above example, exceptions are caught in the displayError method;
2. Obtain the geographical location of the user
Use getCurrentPosition;

The Code is as follows:

Function requestPosition (){
If (nav = null ){
Nav = window. navigator;
}
If (nav! = Null ){
Var geoloc = nav. geolocation;
If (geoloc! = Null ){
Geoloc. getCurrentPosition (successCallback );
}
Else {
Alert ("Geolocation API is not supported in your browser ");
}
}
Else {
Alert ("Navigator is not found ");
}
}

When the location is obtained successfully, a callback method is generated to process the returned results,

The Code is as follows:

Function setLocation (val, e ){
Document. getElementById (e). value = val;
}
Function successCallback (position)
{
SetLocation (position. coords. latitude, "latitude"); setLocation (position. coords. longpolling, "longpolling ");
}

3. A common problem is how to track the changing geographical location of users. Here we will summarize the two APIs used
1 watchPosition
Example:

The Code is as follows:

Function listenForPositionUpdates (){
If (nav = null ){
Nav = window. navigator;
}
If (nav! = Null ){
Var geoloc = nav. geolocation;
If (geoloc! = Null ){
WatchID = geoloc. watchPosition (successCallback );
} Else {
Alert ("Geolocation API is not supported in your browser ");
}
} Else {
Alert ("Navigator is not found ");
}
}

Then, in successCallback, you can set to display the latest geographic location:

The Code is as follows:

Function successCallback (position ){
SetText (position. coords. latitude, "latitude"); setText (position. coords. longpolling, "longpolling ");
}

If you do not want real-time tracking, you can cancel it:
Function clearWatch (watchID ){
Window. navigator. geolocation. clearWatch (watchID );
}
4. How to handle exceptions
When an exception occurs, you can capture it:

The Code is as follows:

If (geoloc! = Null ){
Geoloc. getCurrentPosition (successCallback, errorCallback );
}
Function errorCallback (error ){
Var message = "";
Switch (error. code ){
Case error. PERMISSION_DENIED:
Message = "This website does not have permission to use"
+ "The Geolocation API ";
Break;
Case error. POSITION_UNAVAILABLE:
Message = "The current position cocould not be determined .";
Break;
Case error. PERMISSION_DENIED_TIMEOUT:
Message = "The current position cocould not be determined"
+ "Within the specified timeout period .";
Break;
}
If (message = ""){
Var strErrorCode = error. code. toString ();
Message = "The position cocould not be determined due"
+ "An unknown error (Code:" + strErrorCode + ").";
}
Alert (message );
}

5. display the location on a google map (provided that the location is configured using the google map api)

The Code is as follows:

Function getCurrentLocation ()
{
If (navigator. geolocation)
{
Navigator. geolocation. getCurrentPosition (showMyPosition, showError );
}
Else
{
Alert ("No, Geolocation API is not supported by this browser .");
}
}
Function showMyPosition (position)
{
Var coordinates = position. coords. latitude + "," + position. coords. longpolling;
Var map_url = "http://maps.googleapis.com/maps/api/staticmap? Center ="
+ Coordinates + "& zoom = 14 & size = 300x300 & sensor = false ";
Document. getElementById ("googlemap"). innerHTML = "";
}
Function showError (error)
{
Switch (error. code)
{
Case error. PERMISSION_DENIED:
Alert ("This website does not have permission to use the Geolocation API ")
Break;
Case error. POSITION_UNAVAILABLE:
Alert ("The current position cocould not be determined .")
Break;
Case error. TIMEOUT:
Alert ("The current position cocould not be determined within the specified time out period .")
Break;
Case error. UNKNOWN_ERROR:
Alert ("The position cocould not be determined due to an unknown error .")
Break;
}
}