HTML5 geolocation Practical Small Survey

Text and code please poke

Http://appnext.mybluemix.net/Tracker.html

Detailed description

The code in this article is from this article on DEVELOPWORKDS. However, if you carefully read the code in the original, you will find that there are 2 errors. One is a fatal error that causes the distance calculation to be Nan, and the other to make the calculation display incorrect. However, these two places have been fixed in the code here, interested students can compare the source code to see where the error is. In addition, the code in this page shows all values defined by HTML5 in the position object, and adds a timer to calculate the time elapsed for the display. In addition, a high-precision positional parameter is specified when the Navigator.geolocation.watchPosition method is called enableHighAccuracy:true .

I tried to use Firefox (non-Chinese version), Google Chrome, ie browser on my PC, and Safari and Google Chrome on my Mac. The Android phone comes with its own browser (HTC and Xiaomi) and the iphone comes with a browser to open this page, the results of different browsers on different platforms show some unexpected situations, as shown in the table below (all platforms have been allowed to locate the page as a prerequisite).

differences between different operating systems on different platforms

Platform	Operating System	Browser	Description
Pc	Windows 7	Internet Explorer	Successfully positioned. Altitude/accuracy, orientation, speed display is null (? pending).
Pc	Windows 7	Google Chrome	Unable to locate. After some time display: The browser is unable to get your location information: Network locations provider at ' https://www.googleapis.com/': no response received.
Pc	Windows 7	Firefox (non-Chinese version)	Unable to locate. An unknown error is displayed after some time.
Mac	OS X Yosemite	Safari	Successfully positioned. Altitude/accuracy, orientation, speed display is NULL, update timestamp shown as 30 years ago (StackOverflow asked the same question, poke here to see the original post).
Mac	OS X Yosemite	Google Chrome	Same as Google Chrome in Windows 7, unable to locate.
Android Phone (HTC one M7)	Android 5.0.2 (HTC Sense 6, HTC official ROM non-Android native)	System comes with browser	Successfully positioned. After the GPS is successfully positioned, there are several values except for the altitude accuracy of NULL.
Android Phone (HTC one M7)	Android 5.0.2 (HTC Sense 6, HTC official ROM non-Android native)	Google Chrome	Successfully positioned. After the GPS is successfully positioned, there are several values except for the altitude accuracy of NULL.
Android Tablet (Xiaomi tablet)	Android 4.4.4 (MIUI 5 Development Edition)	System comes with browser	Successfully positioned. Altitude/accuracy, orientation, speed display is null. The positioning takes a long time, averaging about 10 seconds (10000 milliseconds).
Android Tablet (Xiaomi tablet)	Android 4.4.4 (MIUI 5 Development Edition)	Google Chrome	Unable to locate. No errors are displayed after a long wait.
Iphone	IOS 8	System comes with browser (Safari)	Positioning succeeded. After the success of GPS positioning, except the altitude accuracy is null, there are a number of values (? To be sure, no I do not have an iphone, for support).
Ipad	IOS 8	System comes with browser (Safari)	To be measured, ask for an ipad support.

About Google Firefox and other browsers can't locate the reason

Some platforms Google, Firefox and other browsers can not be located because the platform does not provide positioning functions such as GPS, which led to the browser using Google's API to locate, and it is known that Google is not accessible at home, so the location failed. Jesion Wang's answer to this question is explained in detail in this article. If you open this page in Google/Firefox, use the TCP monitoring method to view the connection in the system, you can find that the browser is trying to connect, such as Xxxx.1e100.net, which is also supporting the understanding of the user's answer.

A relatively simple solution is to use third-party location services, such as the browser location feature of the Baidu map API. The advantage is that the implementation is relatively simple, the disadvantage is the location is not accurate, and can not directly obtain the original GPS data. If using the Baidu Map API, the result is encrypted Baidu coordinate system coordinates, and through HTML5 Geolaction obtained coordinates is the original GPS WGS-84 coordinate. If you are not satisfied, here is a Baidu system coordinates converted into GPS coordinates algorithm.

about various coordinate systems

Due to various reasons, GPS equipment acquisition of real GPS coordinates in the domestic is not normal use, need to undergo a conversion to use. This is although it is an open "secret", because we do not talk about politics, interested in children's shoes please ask the following several keywords: Mars coordinate system, GCJ-02, national security plug-ins, gps correction, wgtochina_lb.

After testing and verifying, the coordinates obtained by using the HTML5 geolocation method in the above (detailed description) are coordinates of the Earth coordinate system, that is, if you want to display the coordinates obtained by the HTML5 geolocation method on the map of the third party, Special conversions are required to be used correctly. Take the Baidu Map API, you can refer to this example.

HTML5 geolocation Practical Small Survey