Geographical location of html5

Source: Internet
Author: User

Geographical location of html5

1) use geographic positioning:

Access the location through navigator. geolocation and return a Geolocation object;

1.1) Geolocation object member:

GetCurrentPosition (callback, errorCallback, options) -- get the current position;

WatchPosition (callback, error, options) -- start to monitor the current position;

ClearWatch (id) -- Stop monitoring the current location;

1.1.1) when the browser calls the callback function parameter of getCurrentPosition, it will pass in a position object that provides location details;

Position object member:

Coords -- returns the Coordinates of the current position, that is, the Coordinates object;

Timestamp -- returns the time when the coordinate information is obtained;

Coordinates object member:

Latitude -- returns the latitude in decimal format;

Longpolling -- returns the longitude in decimal format;

Altitude -- returns the altitude in meters;

Accuracy -- returns the coordinate precision represented by meters;

AltitudeAccuracy -- returns the elevation precision in meters;

Heading -- return the travel direction indicated by the cost;

Speed -- returns the travel speed expressed in meters/s;

2) handle geographic location errors:

The second parameter of the getCurrentPosition (callback, errorCallback, options) method, which allows us to specify a function and call it when an error occurs in the obtained position. This function will get a PositionError object;

PositionError object member:

Code -- return code that represents the error type;

= 1 -- the user is not authorized to use the location function;

= 2 -- the location cannot be determined;

= 3 -- the request has timed out;

Message -- returns a string with an incorrect description;

3) specify the location options:

The third parameter provided by the getCurrentPosition (callback, errorCallback, options) method is a PositionOptions object.

PositionOptions object member:

EnableHighAccuracy -- tells the browser that we want to get the best possible results;

Timeout -- a time-out error is reported when the request location is limited;

MaximumAge-tell the browser where we are willing to accept the cache, as long as it is not earlier than the specified number of milliseconds;

4) Monitoring location:

The watchPosition method keeps updating the position. The required parameters are the same as those of the getCurrentPosition method and work in the same way.

The difference is that the callback function is called repeatedly as the position changes.

 

       table{           border-collapse: collapse;       }        th,td{            padding: 4px;        }        th{            text-align: right;        }
    
Longitude: - Latitude: -
Altitude: - Coordinate precision: -
Elevation precision: - Direction: -
Speed: - Time: -
Error Type: - Error Message -
Cancel Watch
 
        var options={            enableHighAccuracy:false,            timeout:2000,            maximumAge:30000        }        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
 
  

 

 

Related Article

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.