Shulou(Shulou.com)06/01 Report--

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:

-

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;}

Longitude:

-

Latitude:

-

Altitude:

-

Accuracy:

-

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:

-

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.