Home >
Web Front-end >
H5 Tutorial >
html5 Guide-4. Use Geolocation to implement positioning function_html5 tutorial skills
html5 Guide-4. Use Geolocation to implement positioning function_html5 tutorial skills
WBOY
Release: 2016-05-16 15:50:18
Original
1537 people have browsed it
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>
Example
< ;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:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn