Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is the learning of extended geographic information service and geographic location API in HTML5

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

It is believed that many inexperienced people are at a loss to learn how to expand geographic information services and geographic location API in HTML5. Therefore, this paper summarizes the causes and solutions of the problems. Through this article, I hope you can solve this problem.

Now the popular kind of service is called location-based service (location-based service, LBS). This kind of service is the information provided by enterprises using the area near the coordinates of a certain point (such as the location of the user), such as common map-related services. In HTML5, a new geographic location API is added to determine and share geographic locations.

Privacy statement

Privacy is a concern when sharing a physical location with a remote Web server. Therefore, geolocation API requires the user to provide permissions before the Web application can access the location information. The first time you access a web page that requests geolocation data, the browser displays a notification bar that prompts you for 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 Web application. Calling the relevant API will not trigger a successful callback.

Check the support of the browser

Geolocation API is supported in the latest versions of mainstream browsers, but to be compatible with older browsers, check it out. If the geolocation API is not available, the window.navigator.geolocation will be null, as follows:

The code is as follows:

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 global object navigator: navigator.geolocation, which provides some useful information about the visitor's browser and system. Geolocation information can be obtained by many means, such as base station, web database, GPS and so on. The accuracy of Geolocation information obtained in different ways is also different. In general, the information obtained through GPS is the most accurate (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 geographic location reading or receive no data at all.

Locate the current location

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 host device asynchronously.

The code is as follows:

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

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

2. GeolocationErrorCallback. Callback used when an error occurs (optional)

3. GeolocationOptions. Geolocation options (optional)

Processing location information

When the getCurrentPositon () method succeeds in getting the current position, it saves the location information to a Position object, which is then used as a parameter to perform the geolocationSuccessCallback callback. In this callback function, you can dispose of the information contained in the object at will.

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

The code is as follows:

. 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 true 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 back-end location server it uses. Also, 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

You can set three properties of geolocationOptions:

The code is as follows:

EnableHighAccuracy: if the device supports high precision, 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 code is as follows:

Click the button to get your position:

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report