HTML5 Location Locator API (4)

Source: Internet
Author: User

Geo-positioning (geolocation) is the most exciting and widely supported new API. Through this set of APIs,

JavaScript code can access the user's current location information. Of course, the user must be explicitly permitted to share their location information on the page before accessing it.

If the page tries to access its geo-location information, the browser displays a dialog box asking the user to share their location information.

The implementation of the Geolocation API in the browser is the Navigator.geolocation object, which contains 3 methods. The first one is GetCurrentPosition (),

Invoking this method triggers a dialog box that asks the user to share geolocation information. This method receives 3 parameters: a success callback function, an optional failure callback function, and an optional option object.

Where the successful return call function receives a position object parameter with two properties: Coords and timestamp. The Coords object will contain the following location-related information.

    • Latitude: The latitude expressed in decimal degrees.
    • Longitude: Longitude expressed in decimal degrees.
    • Accuracy: precision of longitude and latitude coordinates, in meters. Some browsers may also provide the following properties in the Coords object.
    • Altitude: The altitude in meters, or null if there are no related data.
    • Altitudeaccuracy: The accuracy of altitude, in meters, the larger the value, the less accurate.
    • Heading: The direction of the compass, 0° indicates True north, and a value of Nan means no data is detected.
    • Speed: How many meters are moved per second, or null if there is no correlation data.

In real-world development, latitude and longitude are the most commonly used properties for most Web applications. For example, the following code draws the user's location on the map:

Navigator.  Geolocation.  GetCurrentPosition(function(position){ Drawmapcenteredat(position.  Coords.  Latitude, position.  Coords.  Longitude); }); 

The above describes the success callback function. The second parameter of GetCurrentPosition (), the failed callback function, receives a parameter when it is called.

This parameter is an object that contains two properties: Message and code. Where the message property holds the text messages that are given to the person, explaining why the error occurred,

The Code property holds a numeric value that indicates the type of error: Used to deny sharing (1), invalid location (2), or timeout (3). In actual development,

Most Web apps will only save error messages to the log file, not necessarily modify the user interface. For example

Navigator.Geolocation.GetCurrentPosition(function(Position){Drawmapcenteredat(Position.Coords.Latitude,Position.Coords.Longitude);}, function ( Error  {    consolelog ( "Error code:"  +< Span class= "PLN" > Error.    console. ( "Error message:"  + Error. Message});             

The third parameter of GetCurrentPosition () is an option object that sets the type of information. There are three options that you can set:

Enablehighaccuracy is a Boolean value that indicates that the most accurate location information must be used whenever possible, and that timeout is the maximum time to wait for location information in milliseconds;

Maximumage represents the effective time of the last obtained coordinate information, in milliseconds, if time is up to the latest coordinate information. For example:

Navigator.Geolocation.GetCurrentPosition(function(Position){Drawmapcenteredat(Position.Coords.Latitude,Position.Coords.Longitude);}, function(Error) {Console.Log("Error Code:" +Error.Code     console. ( "Error message:"  + Error. Message}, {    enablehighaccuracy: true    timeout: 5000,    maximumage:  25000});             

These three options are optional and can be set individually or with other options. Unless you really need very precise information,

Otherwise it is recommended to keep the false value of enablehighaccuracy (the default value). Setting this option to ture takes a longer time,

It also causes more power to be consumed on mobile devices. Similarly, if you do not need to update the user's location information frequently, you can set Maximumage to infinity,

The last coordinate information is always used.

If you want to track the user's location, you can use another method, Watchposition (). This method receives the same parameters as the GetCurrentPosition () effect.

After the first call to the Watchposition () method, the current position is taken, a successful callback is performed, or an error callback is executed. Then, the Watchposition () in-place wait position has changed the signal (it does not poll the location itself).

Calling Watchposition () returns a numeric identifier that is used to track the monitored operation. Based on this return value, the monitoring operation can be canceled,

Just pass it to the Clearwatch () method (similar to using settimeout () and cleartimeout (). For example:

VarWatchid=Navigator.Geolocation.Watchposition(function(Position){Drawmapcenteredat(Position.Coords.Latitude,Position.Coords.Longitude);}, function (error)  {. Log ( "Error code:"  + Error. Code    console. ( "Error message:"  + Error. Messageclearwatch (watchid     

The above example calls the Watchposition () method and saves the returned identifier in Watchid. The Watchid is then passed to Clearwatch () and the monitoring operation is canceled.

Geolocation-enabled browsers include ie9+, Firefox 3.5+, Opeara 10.6+, Safari 5+, Chrome, iOS Safari, and Android version WebKit.

HTML5 Location Locator API (4)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.