Web API - Using geolocation

demo

The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.

The geolocation objectThe geolocation API is published through the navigator.geolocation object.
If the object exists, geolocation services are available. You can test for the presence of geolocation thusly:

1. if ("geolocation" in navigator) {
   
2.   /* geolocation is available */
   
3. } else {
   
4.   /* geolocation IS NOT available */
   
5. }

复制代码

Note: On Firefox 24 and older versions, "geolocation" in navigator always returned true even if the API was disabled. This has been fixed with Firefox 25 to comply with the spec. (bug 884921).


Getting the current position
To obtain the user's current location, you can call the getCurrentPosition() method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.
Note: By default, getCurrentPosition() tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to getCurrentPosition().

1. navigator.geolocation.getCurrentPosition(function(position) {
   
2.   do_something(position.coords.latitude, position.coords.longitude);
   
3. });

复制代码

The above example will cause the do_something() function to execute when the location is obtained.

Watching the current position
If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the watchPosition() function, which has the same input parameters as getCurrentPosition(). The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for getCurrentPosition(), can be called repeatedly.

Note: You can use watchPosition() without an initial getCurrentPosition() call.

1. var watchID = navigator.geolocation.watchPosition(function(position) {
   
2.   do_something(position.coords.latitude, position.coords.longitude);
   
3. });

复制代码

The watchPosition() method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the clearWatch() method to stop watching the user's location.

1. navigator.geolocation.clearWatch(watchID);

复制代码

Fine tuning response

Both getCurrentPosition() and watchPosition() accept a success callback, an optional error callback, and an optional PositionOptions object.
A call to watchPosition could look like:

1. function geo_success(position) {
   
2.   do_something(position.coords.latitude, position.coords.longitude);
   
3. }
   
4. 
   
5. function geo_error() {
   
6.   alert("Sorry, no position available.");
   
7. }
   
8. 
   
9. var geo_options = {
   
10.   enableHighAccuracy: true,
    
11.   maximumAge        : 30000,
    
12.   timeout           : 27000
    
13. };
    
14. 
    
15. var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

复制代码

[url=]A demo of watchPosition in use:[/url]http://www.thedotproduct.org/experiments/geo/

demo

Describing a position
The user's location is described using a Position object referencing a Coordinates object.

Handling errors
The error callback function, if provided when calling getCurrentPosition() or watchPosition(), expects a PositionError object as its first parameter.

1. function errorCallback(error) {
   
2.   alert('ERROR(' + error.code + '): ' + error.message);
   
3. };

复制代码

Geolocation Live ExampleHTML Content

1. <p><button onclick="geoFindMe()">Show my location</button></p>
   
2. <div id="out"></div>

复制代码

JavaScript Content

1. function geoFindMe() {
   
2.   var output = document.getElementById("out");
   
3. 
   
4.   if (!navigator.geolocation){
   
5.     output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
   
6.     return;
   
7.   }
   
8. 
   
9.   function success(position) {
   
10.     var latitude  = position.coords.latitude;
    
11.     var longitude = position.coords.longitude;
    
12. 
    
13.     output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
    
14. 
    
15.     var img = new Image();
    
16.     img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
    
17. 
    
18.     output.appendChild(img);
    
19.   };
    
20. 
    
21.   function error() {
    
22.     output.innerHTML = "Unable to retrieve your location";
    
23.   };
    
24. 
    
25.   output.innerHTML = "<p>Locating…</p>";
    
26. 
    
27.   navigator.geolocation.getCurrentPosition(success, error);
    
28. }

复制代码

Live Result

demo

Prompting for permission
Any add-on hosted on addons.mozilla.org which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the pref parameter, if applicable. The function provided in the callback parameter will be called with a boolean value indicating the user's response. If true, the add-on may access geolocation data.

1. function prompt(window, pref, message, callback) {
   
2.     let branch = Components.classes["@mozilla.org/preferences-service;1"]
   
3.                            .getService(Components.interfaces.nsIPrefBranch);
   
4. 
   
5.     if (branch.getPrefType(pref) === branch.PREF_STRING) {
   
6.         switch (branch.getCharPref(pref)) {
   
7.         case "always":
   
8.             return callback(true);
   
9.         case "never":
   
10.             return callback(false);
    
11.         }
    
12.     }
    
13. 
    
14.     let done = false;
    
15. 
    
16.     function remember(value, result) {
    
17.         return function() {
    
18.             done = true;
    
19.             branch.setCharPref(pref, value);
    
20.             callback(result);
    
21.         }
    
22.     }
    
23. 
    
24.     let self = window.PopupNotifications.show(
    
25.         window.gBrowser.selectedBrowser,
    
26.         "geolocation",
    
27.         message,
    
28.         "geo-notification-icon",
    
29.         {
    
30.             label: "Share Location",
    
31.             accessKey: "S",
    
32.             callback: function(notification) {
    
33.                 done = true;
    
34.                 callback(true);
    
35.             }
    
36.         }, [
    
37.             {
    
38.                 label: "Always Share",
    
39.                 accessKey: "A",
    
40.                 callback: remember("always", true)
    
41.             },
    
42.             {
    
43.                 label: "Never Share",
    
44.                 accessKey: "N",
    
45.                 callback: remember("never", false)
    
46.             }
    
47.         ], {
    
48.             eventCallback: function(event) {
    
49.                 if (event === "dismissed") {
    
50.                     if (!done) callback(false);
    
51.                     done = true;
    
52.                     window.PopupNotifications.remove(self);
    
53.                 }
    
54.             },
    
55.             persistWhileVisible: true
    
56.         });
    
57. }
    
58. 
    
59. prompt(window,
    
60.        "extensions.foo-addon.allowGeolocation",
    
61.        "Foo Add-on wants to know your location.",
    
62.        function callback(allowed) { alert(allowed); });

复制代码

demo

Browser compatibility

• Desktop
  

      

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5	3.5(1.9.1)	9	10.60 Removed in 15.0 Reintroduced in 16.0	5

• Mobile
  

      

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	11	4.0 (4)	10	10.60	3.2

Gecko notes

Firefox includes support for locating you based on your WiFi information using Google Location Services. In the transaction between Firefox and Google, data is exchanged including WiFi Access Point data, an access token (similar to a 2 week cookie), and the user's IP address. For more information, please check out Mozilla's Privacy Policy and Google's Privacy Policy covering how this data can be used.

Firefox 3.6 (Gecko 1.9.2) added support for using the GPSD (GPS daemon) service for geolocation on Linux.
See also

    navigator.geolocation
    Geolocation API on w3.org
    Demos about the Geolocation API
    Who moved my geolocation?(Hacks blog)