This article is reproduced from http://www.html5website.com/html5-geolocation/http://www.html5website.com/html5-geolocation/ HTML5 Geolocation
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> |
- 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> |
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 |
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> This article is reproduced from http://www.html5website.com/html5-geolocation/ |
No comments:
Post a Comment