This article is reproduced from http://www.html5website.com/html5-geolocation/
http://www.html5website.com/html5-geolocation/ is used to locate the user’s position.
HTML5 Geolocation API is used to get the the user’s positon
Considering that the feature may involve invasion of privacy, the
user’s position information is unavailable unless consented by users.
browser support
Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation.
Note: . Geolocation is more accurate on the device with GPS function, such as Iphone.
Use of Geolocation.
Please use getCurrentPosition() to get the user’s position.
The following is a simple geolocation example. You can go back to the longitude and latitude of the user’s position.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="The browser does not support";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
</script>
|
Example analysis
- detect whether it supports geolocation or not.
- If it supports,just run getCurrentPosition(). If not support, a message will show to users.
- . If getCurrentPosition() runs successfully, it returns a coordinates object to the function specified in the …
- showPosition() function retrieves and displays the latitude and longitude
- The second parameter of getCurrentPosition() method is used to
handle errors. It specifies the function when failing to get user’s
position.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="The user refused to get the geographic location of the request"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is not available."
break;
case error.TIMEOUT:
x.innerHTML="time out
break;
case error.UNKNOWN_ERROR:
x.innerHTML="error"
break;
}
}
|
error code:
Permission denied
Position unavailable
Timeout
If you need to show result in the map, you need to visit the map
service with longitude and latitude, such as Google Map or Baidu Map
show result in the map
1
2
3
4
5
6
7
8
9
10
11
|
</pre>
<div>function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;</div>
<div></div>
+latlon+"&zoom=14&size=400x300&sensor=false";</div>
<div></div>
<div>document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}</div>
<pre>
|
In the above example, we use the retrieved longitude and latitude date to show location in Google Map.( use static image)
The above link shows how to use script to display interactive map with options of markers, zoom in and out and drag.
The page shows how to display a user’s locaton on a map. While, the
geolocation is also very useful for the information about a given
location.
Example:
Update local information
Display interesting spots around users
GPS
getCurrentPosition() Return
If getCurrentPosition() method is successful, it returns an object to
the function. It will always return latitude, longitude and accuracy
attribute.
If the method can be used, it can return the following attributes
| coords.latitude |
latitude of decimal number |
| coords.longitude |
longitude of decimal number |
| coords.accuracy |
accuracy of location |
| coords.altitude |
altitude, measured in meters above sea level. |
| coords.altitudeAccuracy |
altitude accuracy of location |
| coords.heading |
direction, measured in degree from the north |
| coords.speed |
speed, measured in m/s |
| timestamp |
responding date/time |
Geolocation object-other interesting methods
watchPosition() -return to user’s current location, and continue to
return to the latest location when the user moves.( just like the GPS of
a car)
clearWatch() – stop watchPosition() method
The following example shows the watchPosition() method. You need a accurate GPS device (e.g. iPhone ) to test the example.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML=" browser does not support";}
}
function showPosition(position)
{
x.innerHTML=" latitude: " + position.coords.latitude +
"
longitude: " + position.coords.longitude;
}
</script>
|
