Introduction to the Geolocation (geolocation) API

First, Brief introduction

The geolocation API (geo-Location Application interface) provides a way to accurately know the current location of a browser user. And now it seems that the browser support is good (because the new version of IE supports the API), which makes it possible to use this browser built-in API in the near future. The API interface provides the user location information is quite detailed, latitude ah, altitude ah, accuracy, movement speed AH are can be obtained.

As far as I know, its location is acquired by collecting the wireless hotspot around the user and the IP address of your PC. The browser then sends this information to the default location locator service provider, which is the Google Location service, which calculates your location. The last user's location information is shared on the site you requested.

Geolocation is not yet a part of the HTML5 specification, but for its independence out of a detailed specification, therefore, the API's pedigree is relatively pure, the route is relatively innocent.

Second, the browser support situation

Currently the geo-location API is supported by the following desktop browsers:

Firefox 3.5+

Chrome 5.0+

Safari 5.0+

Opera 10.60+

Internet Explorer 9.0+

The Geo-location API can also be supported by mobile devices, as follows:

Android 2.0+

IPhone 3.0+

Opera Mobile 10.1+

Symbian (S60 3rd & 5th Generation)

Blackberry OS 6

Maemo

Third, data protection

Obviously, geographic location belongs to one of the user's privacy information, especially when doing some obscure things, such as carrying his wife to see ex, to the Athens Palace for massage. Therefore, the browser will not directly present the user's geographical location information, when the need to obtain user location information, the browser asks the user, whether willing to disclose their geographical location information, as follows:

If you choose not to share, the browser will not do anything.

If you accidentally share a location with a site, you can cancel it at any time, by doing the following:

For IE9 browser, Internet Options → privacy → location (clearing site), as follows:

For Firefox browsers, here's how:

Click on the Small website icon in front of the address bar → Click more info → permissions → share azimuth information → block, see below for specific steps.

If you're in Chrome, just click on the small icon on the right side of the address bar that looks like a ship's steering wheel, and you'll see a little box to remove the location:

Iv. Geographical Resources

In order to obtain the geographic information of a user, multiple resources are needed, and the contribution of different resources to location accuracy is not the same. For desktop browsers, WiFi (Error 20 meters) or IP location (which is affected by the city's grade) is usually used. For mobile devices tend to use surveying techniques, such as GPS (Error 10 meters, can only be used outdoors), WiFi or the ID of the GSM/CDMA site (error 1000 meters).

V. Use of the API

Before using the Geolocation API, the first thing to detect is whether the browser is supported, test code as follows:

if (navigator.geolocation) {

What do you want to do?

}

Of course, this if judgment can also be used to make browser judgments that differentiate between ie6~8 browsers and IE9 and other modern browsers. This is useful when we use some of the CSS3 properties, and it is relatively cumbersome to detect whether the browser supports certain CSS3 properties, which can be compromised by detecting a browser with the browser's support for that CSS3 property, which is generally a distinction between ie6~8 browsers and other browsers. This is exactly the same as the navigator.geolocation test.

With this API, we have two method variables that can be used to obtain the user's geographic location:

GetCurrentPosition and Watchposition

The two method parameters are consistent, support three parameters, take getcurrentposition example, Navigator.geolocation.getCurrentPosition (Successcallback, Errorcallback, Options).

Where Successcallback is a successful callback for the method, this parameter must be;

Errorcallback is the callback when the method fails, this parameter is optional;

The option parameter is an additional parameter, an optional parameter, an object. The option parameter supports three optional parameter APIs: enablehighaccuracy, timeout, maximumage.

1. The enablehighaccuracy parameter indicates whether high precision is available, Boolean type, false by default, and if turned on, the response time will be slow, and more traffic will be used on the mobile device, that is, money.

2. The timeout parameter indicates the maximum time to wait for a response, which is 0 milliseconds by default, indicating infinite time.

3. Maximumage represents the cache time for the application. In milliseconds, the default is 0, which means that every request is immediately taken to get a completely new object content.

Talk about the Clearwatch method before you introduce the differences between the GetCurrentPosition and Watchposition methods. The Clearwatch method value accepts a parameter, which is the watchid that the parameter is returned by the Watchposition method.

Now, tell the difference. GetCurrentPosition method belongs to a one-time access to the user's geographical location information, and the Watchposition method constantly take the user's geographical location information, constantly update the user's location information, which in our car when the real-timely knowledge of their position is more useful. The Watchposition method can be stopped by the Watchposition method (stop updating the user's geo-location information continuously) by passing the Watchid returned by the Watchposition method.

When the user's location is returned, it is hidden in a location object that includes some attributes, as shown in the following table:

Property

Interpretation

Coords.latitude

Latitude value

Coords.longitude

Longitude value

Coords.altitude

Height above the reference ellipsoid

Coords.accuracy

Accuracy

Coords.altitudeaccuracy

High degree of accuracy

Coords.heading

The direction of the device north clockwise

Coords.speed

Movement speed of the external environment of the device (m/s)

Timestamp

Timestamp when the position was captured

There are only coords.latitude in these properties, Coords.longitude and Coords.accuracy will definitely have something to return, and the other properties are likely to return null. Now we can use the latitude and longitude returned here to mark your location on Google Maps.

Vi. Examples of Use

Now for an example of applying the Geolocation API, the application is GetCurrentPosition, which shows you the current position on the map.

You can click here: Google Maps show your current location demo

To display the location of the article that I am currently writing:

Clicking on the icon in the middle of the bubble will show the user your current latitude and longitude, timestamp, etc., as shown in:

However, to tell the truth, this distance error is not only 1000m, estimated at least 2000~3000m, I am in Pudong New area, Huangpu River side, but it put me on the other side of the river.

Tip: If you want to see the effect, you need to use a non-IE6/IE7/IE8 browser, otherwise, you will only see a line of text with the smiley face, in other browsers need to allow access to your geo-location information, because this thing can be canceled at any time, so you can be assured that bold permission.

Because the script code has almost 70 lines, put on the page has the space suspicion, so here only to show some core code logic, as for the details, you can view the source code of the page, there are comments,

<script src= "Http://maps.google.com/maps/api/js?sensor=false" ></script>

<script>

var elegmap = document.getElementById ("Gmap");

var showmap = function (position) {

The location object where the latitude is located

var pos = new Google.maps.LatLng (position.coords.latitude, position.coords.longitude);

Displays Google Maps based on latitude and longitude in pos objects ha!

//...

};

if (navigator.geolocation) {

elegmap.innerhtml = ' <div id= ' help ' >< /div> ';

Request to get a location once

Navigator.geolocation.getCurrentPosition (SHOWMAP);

} else {

elegmap.innerhtml = ' <div id= ' Help > Your browser does not support geolocation O (∩_∩) o~</div> ';

}

</script>

Vii. concluding remarks

The above example is quite simple, the function and potential of the Geolocation API is obviously more than that, the specification itself also provides some application examples, such as:

Discovering and plotting network points in the user's area

On the map, mark some information at the user's location

Navigating with Watchposition routes

Update the latest local information when you move

After all, at home, for desktop browsers, low-version ie, which does not support geolocation APIs, still occupies half of the time, so it will take some days to apply this API to desktop browsers. But for mobile devices such as mobile phones, ipad, I think it can be good use of this good API, can make a lot of practical functions, but I do not develop mobile phone, so, Jiangshan, but also to see others.

Reference article: Finding your position with geolocation

Introduction to the Geolocation (geolocation) API