How to use Geographic location to realize location function in HTML5
This article introduces the relevant knowledge of "how to use geographical location to achieve location function in HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
We can get geolocation objects through navigator.geolocation, which provides the following methods:
GetCurrentPosition (callback, errorCallback, option): get the current location
WatchPosition (callback, wrong option): start monitoring the current location
ClearWatch (ID): stop monitoring the current location
Note: the browser used in the following example is Chrome. Using other browsers, I cannot guarantee that the running results are consistent with the results shown in the examples.
1. Current e-magazine location
We will use the getCurrentPosition method to get the current location, and the location information will not be returned directly in the form of a result, but we need to use a callback function to process it.
The copy code is as follows:
Example
Table {border-colla ps e: collapse;}
Th,td {padding:4px;}
Th {text-align:right;}
Longitude:
-
Latitude:
-
Altitude:
-
Accuracy:
-
Altitude accuracy:
-
Title:
-
Speed:
-
Timestamp:
-
Navigator.geolocation.getCurrentPosition (displayPosition)
Function displayPosition (pos) {
Var pr operties = ['longitude', 'latitude', 'altitude', 'precision', 'altitudeAccuracy',' heading', 'speed']]
For (var I = 0Len = properties.length; I
Longitude:
-
Latitude:
-
Altitude:
-
Accuracy:
< / th>-
High accuracy:
-
Title:
-
Speed:
-
Timestamp:
-
Error code:
-
Error message:
-
Navigator.geolocation.getCurrentPosition (displayPosition,handleError)
Function displayPosition (pos) {
Var properties = ["longitude", "latitude", "altitude", "
Document.getElementById (properties [I]). InnerHTML = value
}
Document.getElementById ("timestamp"). InnerHTML = pos.timestamp
}
Function handleError (err) {
Document.getElementById ("errcode"). InnerHTML = err.code
Document.getElementById ("errmessage"). InnerHTML = err.message
}
Deny authorization, run result:
3. Use
The options in the geoolocation optional parameter getCurrentPosition (callback,errorCallback,options) have the following parameters to enable high precision: use the best results; timeout: timeout (milliseconds); maximum age: specify cache time (milliseconds). Let's take the following example:
The copy code is as follows:
Example
Table {Boundary fold: fold;}
Th,td {fill: 4px;}
{text alignment: right;}
< / style>Longitude:
-
Latitude:
-
Altitude:
-
Accuracy:
< / th>-
High accuracy:
-
Title:
-
Speed:
-
Timestamp:
-
Error code:
-
Error message:
-
Var options = {
EnableHighAccuracy:false
Timeout:2000
MaximumAge:30000
}
Navigator.geolocation.getCurrentPosition (displayPosition,handleError,options)
Var attribute = ["longitude", "latitude", "height", "precision", "altitudeAccuracy", "heading", "speed"]
For (var I = 0; I
Longitude:
-
Latitude:
-
Altitude:
-
Accuracy:
< / th>-
High accuracy:
-
Title:
Var watchID = navigator.geolocation.watchPosition (displayPosition,handleError,options); document.getElementById ("pressme"). Onclick = function (e) {
Navigator.geolocation.clearWatch (watchID)
}
Function displayPosition (pos) {
Var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"]
For (var I = 0; I
