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

The main content of this article is to explain "how to achieve Javascript API expansion in HTML5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve Javascript API extension with HTML5".

The kind of service that is popular now is called location-based service (location-based service, LBS). This kind of service is that enterprises take advantage of related services at a certain point (such as the location of the user). In HTML5, a new geographic location API is added to determine and share geographic locations.

Privacy statement

Privacy is a concern when sharing physical locations with remote Web servers. Therefore, geolocation API requires the user to provide permissions before the Web application can access the location information. The first time you visit a web page that requests location data, the browser displays a notification bar that prompts you to provide access to the user's location. Follow the prompts of the browser and select the relevant authorization.

If the user does not grant permissions, location information is not provided to the network application. Calling the relevant API will not trigger a successful callback.

If you check the browser, please get the iTunes situation immediately.

Geolocation API is supported in the latest versions of mainstream browsers. If geolocation API is not available, the window.navigator.geolocation will be null, as follows:

The copy code is as follows: www.mb5u.com

Function show_islocationenabled ()

{

Var str = "No, geolocation is not supported."

If (window.navigator.geolocation) {

Str = "Yes, geolocation is supported."

}

Alert (str)

}

Geolocation API is based on a new property of the navigator, the target object: navigator.geolocation, which provides some useful information about the visitor's browser and system. It's GPS et al. The accuracy of geographic location information obtained by different methods is also different. In general, the highest accuracy is obtained through GPS (GPS is used most frequently on mobile platforms, while network data is basically used on PC platforms). Occasionally, in some locations, you may not be able to get a clear location reading or receive any data. Positioning

Current position

Use the getCurrentPosition () method of navigator.geolocation to get the user's current location, which only gets the location information once. When the method is called by the script, the method attempts to get the current location of the managed device asynchronously.

The copy code is as follows: www.mb5u.com

Method signature: getCurrentPosition (geolocationSuccessCallback, [geolocationErrorCallback,geolocationOptions])

1. GeolocationSuccessCallback: get the replacement after the current location is successful (required)

. 2. GeolocationErrorCallback . Optional to use when an error occurs (optional)

. 3. GeolocationOptions . Geolocation options (optional)

Processing location information

After the getCurrentPositon () method succeeds in getting the current position, the repositioning information is saved to a location object, and then the object is used as a parameter to perform the geolocationSuccessCallback step. It's a message.

The location object has two properties: the timestamp and the coords.timestamp attribute represent the creation time of the geolocation data, and the COORDS attribute represents the geolocation information and contains seven attributes:

The copy code is as follows: www.mb5u.com

. Coords.latitude: estimated latitude

. Coords.longitude: estimated longitude

. Coords.altitude: estimated height

. Coords.accuracy: the accuracy of longitude and latitude estimates in meters provided

. Coords.altitudeAccuracy: the accuracy of the height estimation in meters provided

. Coords.heading: the current angle direction of the host device, calculated clockwise relative to the north direction

. Coords.speed: the current ground speed of the device in meters per second

In general, three of these properties are guaranteed: coords.latitude,coords.longitude and coords.accuracy, and the rest return null;, depending on the capabilities of the device and the location server it uses. Moreover, the heading and speed attributes can be calculated based on the user's previous location.

Handling error

If an error occurs when executing the getCurrentPositon () method, the method passes a PositionError object to the geolocationErrorCallback callback.

Set geolocation options dialog box

You can set three properties of geolocationOptions:

The copy code is as follows: www.mb5u.com

EnableHighAccuracy: if the device supports advanced, this option indicates whether high precision is enabled. Timeout

Query timeout

MaximumAge: the maximum number of times where the cache is located, during which time the cache can be used.

Take a look at the complete example below:

The copy code is as follows: www.mb5u.com

Click the button to get the location:

Try

Var x = document.getElementById ("demo")

Function getLocation () {

If (navigator.geolocation) {

Navigator.geolocation.getCurrentPosition (showPosition,showError)

}

Else {

X [XSS _ clean] = "this browser does not support geolocation."

}

}

Function showPosition (position) {

Var latlon = position.coords.latitude + "," + position.coords.longitude

Var img_url = "http:

Latlon + "& zoom = 9&size = 400x300&sensor = false"

Document.getElementById ("mapholder"). InnerHTML = "

"

}

Function showError (error) {

Switch (error.code) {

Case error.PERMISSION_DENIED:

X [XSS _ clean] = "the user rejected the geolocation request."

Rest

Case error.POSITION_UNAVAILABLE:

X [XSS _ clean] = "location information is not available."

Rest

Wrong case. TIMEOUT:

X [XSS _ clean] = "request for user location timed out."

Rest

Wrong case. UNKNOWN_ERROR:

X [XSS _ clean] = "an unknown error occurred."

Rest

}

}

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.