HTML5 new feature Geolocation building a geographically based Web application

It then discusses the privacy of http://www.aliyun.com/zixun/aggregation/79228.html > HTML5 geo-location data, and how the browser uses that data. In the end, this article will explore its practical application, demonstrating and letting you learn how to use it to build a practical, geographically based WEB application.

New features in HTML5

HTML5 is the latest generation of HTML specifications, is the result of the cooperation between the WHATWG and the consortium, is still outside the development. Since the last generation Html4,web world has undergone great changes, HTML5 's arrival has greatly promoted the development of the WEB, HTML5 provides a lot of new features, mainly:

new HTML elements, such as section, Nav, header, footer, aspires, etc. for painting Canvas elements for multimedia playback video and audio elements for locating geolocation API local storage and offline Application Web brought API

This paper mainly explains the geolocation function of HTML5 for positioning, and provides examples to introduce its application in practice.

Location information

In HTML5, when a location is requested, if the user agrees, the browser returns the location information provided to the browser by the underlying device (such as a laptop or mobile phone) that supports geolocation. Location information consists of latitude, longitude coordinates, and some other metadata. For example, the location information of the Imperial Palace in Beijing is composed of a pair of latitude and longitude coordinates: Latitude: 39.9 latitude, Longitude: east longitude 116.4.

The latitude and longitude coordinates are represented in two ways: decimal format (for example, 39.9) and DMS (Degree Minute Second, Angle) formats (for example, 39°54′20″). The coordinate format returned by the HTML5 geolocation API is in decimal format. In addition to latitude and longitude coordinates, HTML5 geolocation also provides the accuracy of position coordinates. In addition, it will provide some other metadata, such as altitude, altitude accuracy, driving direction and speed, depending on the browser's hardware device.

Location information is generally obtained from the following data sources:

IP address three-dimensional coordinate GPS (Global Positioning System, GPS) Wi-Fi mobile phone signal user-defined data

They each have advantages and disadvantages as shown in table 1, many devices use multiple data source combinations to ensure higher accuracy.

Table 1. Comparison of location information acquisition methods

data source advantages and disadvantages IP addresses are available anywhere


is not accurate on the server side (often wrong, generally accurate to the city level)


computing cost Large GPS very precise positioning time, large power consumption


Indoor Effect Difference


requires additional hardware devices to support Wi-Fi precision


can be used indoors


simple, fast in rural areas where few Wi-Fi access points are unable to use the cell phone signal is quite accurate


can be used indoors


simple, fast need to be able to access mobile phones or their modem device user-defined to obtain more accurate location data than the program positioning service


user input may be faster than automatic detection may be inaccurate, especially if the user's location changes

Browser support

Browsers have different levels of support for HTML5 geolocation and are constantly being updated. The good news is that in all of HTML5 's functions, HTML5 geolocation is one of the first to be fully accepted and implemented, and the relevant specification has reached a very mature stage and is unlikely to be changed too much. As shown in table 2, many browsers already support HTML5 geolocation:

Table 2. Browser support for HTML5 geolocation

Browser support Firefox 3.5 and above support for Chrome in 2nd edition with Gears Chrome is supported by Internet Explorer via Gears plugin support Opera in version 10 support Safari in version 4 Support to achieve

on IPhone

Because browsers support it differently, it is a good idea to check whether the browser supports the HTML5 geolocation API before using it. Later, I'll explain how to check if the browser supports this feature. All of the sample programs in this article run test success on Firefox 12.0.