Several ways to locate geographic location: IP address, GPS, Wifi, GSM/CDMA
Geographic location acquisition process :1. The user opens a web application that needs to obtain a geographical location.
2. The application requests the browser to the geographical location, and the browser pops up a query to ask whether the user is sharing the geographical location.
3. Assuming that the user allows it, the browser will query the relevant information from the settings.
4. The browser sends relevant information to a trusted location server, and the server returns to the specific geographical location.
Implementation of HTML5 geographical status :1. Implement the technology of obtaining users based on browser (no backend support required)
2. Accurately locate the user's geographical location (the accuracy is up to 10m, depending on the equipment)
3. Continuously track user's geographical location
4. Interactively present location information with Google Map or Baidu Map
The Geolocation API is used to share user's current geolocation information with trusted sites, which involves user's privacy and security issues. Therefore, when a site needs to obtain the user's current geolocation, the browser will prompt the user to allow or reject.
Let’s first look at which browsers support the Geolocation API:
IE9.0+, FF3.5+, Safari5.0+, Chrome5.0+, Opera10.6+, IPhone3.0+, Android2.0+
The Geolocation API exists in the navigator object and contains only 3 methods:
1. getCurrentPosition //Current location
2. watchPosition // Monitoring location
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 rejected the use of location sharing service, the query has been cancelled");
break;
case error.POSITION_UNAVAILABLE :
alert( ", sorry, you cannot provide location services to your planet for the time being");
break;
}
});
watchPosition is like a tracker paired with clearWatch.
watchPosition is a bit like the way setInterval and clearInterval work.
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 use, which facilitates users to create LBS geographic applications. First, in a browser that supports HTML 5, when opening the API, it will ask whether the user agrees to use the API, otherwise it will not be enabled, ensuring security.
1. Turn on to determine whether the browser supports LBS apifunction 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, the exception was also caught in the displayError method;
2. Obtain the user's geographical locationThis is done using getCurrentPosition;
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 geographical location is successfully obtained, a callback method will be generated to process the returned result.
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 changing geographical location of users. Here we summarize the two APIs used.1 watchPosition
Examples are 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 the latest geographical location to display:
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 deal with exceptionsWhen an exception is encountered, you can catch it:
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 the Google map API is set)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.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";
}
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 within the specified time out period.")
break;
case error.UNKNOWN_ERROR:
alert("The position could not be determined due to an unknown error.")
break;
}
}