Summary of development and application of geographical location positioning api interface in html5

Summary of development and application of geographical location positioning api interface in html5_html5 tutorial skills

WBOY

Release： 2016-05-16 15:50:40

Original

1378 people have browsed it

Several methods of geolocation positioning: IP address, GPS, Wifi, GSM/CDMA

Geolocation acquisition process :
1. The user opens the web application that needs to obtain the geolocation.
2. The application requests the geographical location from the browser, and the browser pops up a query asking the user whether to share the geographical location.
3. Assuming the user allows it, the browser queries the relevant information from the device.
4. The browser sends relevant information to a trusted location server, and the server returns the specific geographical location.

Implementation of HTML5 geographical location:
1. Implement browser-based (without back-end support) technology to obtain the user’s geographical location
2. Accurately locate the user’s geographical location (The accuracy is up to 10m, depending on the device)
3. Continuously track the user’s geographical location
4. Interact with Google Map or Baidu Map to present location information

Geolocation API is used to connect users The current geographical location information is shared with trusted sites, which involves user privacy and security issues. Therefore, when a site needs to obtain the user's current geographical location, the browser will prompt the user to "allow" or "deny".
First check which browsers support Geolocation API:
IE9.0, FF3.5, Safari5.0, Chrome5.0, Opera10.6, IPhone3.0, Android2.0
Geolocation API exists in The navigator object only contains 3 methods:

Copy code

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 have refused to use Location sharing service, query has been canceled" );
break;
case error.POSITION_UNAVAILABLE :
alert( ", Sorry, location services are temporarily unavailable 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 geographical location to provide users with It is convenient for users to create LBS geographical applications. First, in browsers that support HTML 5, when the API is turned on, the user will be asked whether they agree to use the API. Otherwise, it will not be turned on to ensure safety.
1. Turn it on to determine whether the browser supports LBS api

Copy code

Code 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, there is still displayError In the method, the exception is caught;
2. Get the user’s geographical location
Just use getCurrentPosition;

Copy code

The code is as follows:

When the geographical location is successfully obtained, a callback method will be generated to process the returned result,

Copy code

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.longitude, "longitude");
}

3. A very common question is how to track the user’s changing geographical location. Here is a summary of the two APIs used
1 watchPosition
The example is as follows:

Copy code

The code is as follows:

Then in In the successCallback, you can set the latest geographical location to be displayed:

Copy the code

The code is as follows:

function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude");
}

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 you encounter an exception, you can catch it:

Copy the code

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 could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "The current position could not be determined "
"within the specified timeout period.";
break;
}
if (message == "") {
var strErrorCode = error.code.toString();
message = " The position could not be determined due to "
"an unknown error (Code: " strErrorCode ").";
}
alert(message);
}

5. Display the location on google map (provided that google map api and other settings are set up)

Copy code

The code is as follows:

";
}
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 could not be determined.")
break;
case error.TIMEOUT:
alert("The current position could not be determined.") position could not be determined within the specified time out period.")
break;
case error.UNKNOWN_ERROR:
alert("The position could not be determined due to an unknown error.")
break;
}
}