html5 Guide-4. Use Geolocation to implement positioning function_html5 tutorial skills

What we are going to learn today is to use Geolocation to implement positioning functions. We can obtain the Geolocation object through navigator.geolocation, which provides the following methods:
getCurrentPosition(callback,errorCallback,options): Get the current position;
watchPosition(callback,error,options): Start monitoring the current position;
clearWatch(id): Stop monitoring the current location.
note: The browser used in the example below is chrome. If you use other browsers, I cannot guarantee that the running results will be consistent with the results displayed in the example.
1. Get the current position
We will use the getCurrentPosition method to get the current position. The location information will not be returned directly in the form of a result. We need to use the callback function for processing. There will be some delays in getting the coordinates, and you will be asked for access permissions. Let’s look at the following example:

Copy the code

The code is as follows:

< !DOCTYPE HTML>






< ;table border="1">

Longitude:
-
Latitude:
-


Altitude:
-
Accuracy:
-


Altitude Accuracy:
-
Heading:
-
< /tr>

Speed:
-
Time Stamp:
-


<script> <br>navigator.geolocation.getCurrentPosition(displayPosition); <br>function displayPosition(pos) { <br>var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading ', 'speed']; <br>for (var i = 0, len = properties.length; i < len; i ) { <br />var value = pos.coords[properties[i]]; <br /> document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById('timestamp').innerHTML = pos.timestamp; <br />} <br /></script>

The returned position object contains two attributes, coords: returns the coordinate information; timestamp: the time when the coordinate information was obtained. Among them, coords includes the following attributes: latitude: latitude; longitude: longitude; altitude: height; accuracy: accuracy (meters); altitudeAccuracy: height accuracy (meters); heading: direction of travel; speed: speed of travel (meters/second) .
Not all information will be returned, depending on the device you are hosting your browser on. Mobile devices with GPS, accelerometer, and compass will return most of the information, but home computers will not. The location information obtained by the home computer depends on the network environment or wifi. Let's look at the results of the above example.

Click Allow to obtain coordinate information.

2. Handling exceptions
Now we introduce the exception handling of getCurrentPosition, which is implemented by using the errorCallback callback function. The parameter error returned by the function contains two attributes, code: error type code; message: error message. The code contains three values: 1: The user is not authorized to use geolocation; 2: Unable to obtain coordinate information; 3: Timeout for obtaining information.
Let’s look at an example below:

Copy the code

The code is as follows:

Longitude:	-	Latitude:	-
Altitude:	-	Accuracy:	-
Altitude Accuracy:	-	Heading:	-
Speed:	-	Time Stamp:	-
Error Code:	-	Error Message:	-

<script> <br>navigator.geolocation.getCurrentPosition(displayPosition, handleError); <br>function displayPosition(pos) { <br>var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; <br>for (var i = 0; i < properties.length; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById("timestamp").innerHTML = pos.timestamp; <br />} <br />function handleError(err) { <br />document.getElementById("errcode").innerHTML = err.code; <br />document.getElementById("errmessage").innerHTML = err.message; <br />} <br /></script>

拒绝授权，运行结果：

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用，enableHighAccuracy：使用最好的效果；timeout：超时时间（毫秒）；maximumAge：指定缓存时间（毫秒）。我们来下下面的例子：

复制代码

代码如下:

Longitude:	-	Latitude:	-
Altitude:	-	Accuracy:	-
Altitude Accuracy:	-	Heading:	-
Speed:	-	Time Stamp:	-
Error Code:	-	Error Message:	-

<script> <br>var options = { <br>enableHighAccuracy: false, <br>timeout: 2000, <br>maximumAge: 30000 <br>}; <br>navigator.geolocation.getCurrentPosition(displayPosition, handleError, options); <br>function displayPosition(pos) { <br>var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; <br>for (var i = 0; i < properties.length; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById("timestamp").innerHTML = pos.timestamp; <br />} <br />function handleError(err) { <br />document.getElementById("errcode").innerHTML = err.code; <br />document.getElementById("errmessage").innerHTML = err.message; <br />} <br /></script>

4.监视位置变化
下面我们介绍使用watchPosition方法实现位置变化的监视，他的使用方法和getCurrentPosition一样。我们来看例子：

复制代码

代码如下:

Longitude:	-	Latitude:	-
Altitude:	-	Accuracy:	-
Altitude Accuracy:	-	Heading:	-
Speed:	-	Time Stamp:	-
Error Code:	-	Error Message:	-

Cancel Watch
<script> <br>var options = { <br>enableHighAccuracy: false, <br>timeout: 2000, <br>maximumAge: 30000 <br>}; <br>var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options); <br>document.getElementById("pressme").onclick = function (e) { <br>navigator.geolocation.clearWatch(watchID); <br>}; <br>function displayPosition(pos) { <br>var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]; <br>for (var i = 0; i < properties.length; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = value; <br />} <br />document.getElementById("timestamp").innerHTML = pos.timestamp; <br />} <br />function handleError(err) { <br />document.getElementById("errcode").innerHTML = err.code; <br />document.getElementById("errmessage").innerHTML = err.message; <br />} <br /></script>

当点击Cancel Watch按钮时，停止监视。
demo下载地址：Html5Guide.Geolocation.zip