Using geolocation

  • Enlace amigable (slug) de la revisión: WebAPI/Using_geolocation
  • Título de la revisión: Using geolocation
  • Id de la revisión: 379869
  • Creada:
  • Creador: lfentanes
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

La API de geolocalización permite al usuario su ubicación a las aplicaciones web si así lo desean. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.

 

El objeto geolocation


La API de geolocalización se publica a través del objeto

{{domxref("window.navigator.geolocation","navigator.geolocation")}}.

Si el objeto existe, los servicios de geolocalización están disponibles. Usted puede comprobar la presencia de la geolocalización de esta manera:

if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocaiton IS NOT available */
}

Obteniendo la ubicación actual

Para obtener la ubicación actual del usuario, puede llamar al método

{{domxref ("window.navigator.geolocation.getCurrentPosition ()", "getCurrentPosition ()")}}.

Esto inicia una solicitud asíncrona para detectar la posición del usuario, y consulta el hardware de posicionamiento para obtener información actualizada. Cuando se determina la posición, la función de callback es ejecutada. Si lo desea, puede proporcionar otra función de callback que se ejecuta si se produce un error. Un tercer parámetro opcional, es un objeto de opciones donde se puede establecer la edad máxima de la posición devuelta, el tiempo de espera para una solicitud y si quiere una alta precisión para la posición.

Note: Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja presición. Es útil si necesita cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

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

Al ejecutar el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.

Rastreando la posición actual

Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.

Note: Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

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

El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearPosition()")}} para dejar de rastrear la posición del usuario.

navigator.geolocation.clearWatch(watchID);

Afinando la respuesta

Ambos métodos,  {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto PositionOptions también opcional.

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:

function geo_success(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
  alert("Sorry, no position available.");
}

var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

Demo de watchPosition: http://www.thedotproduct.org/experiments/geo/


Describiendo una posición

La ubicación del usuario es descrita con un objeto Position referenciando a un objeto Coordinates.

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

Manejo de errores

La función de callback de error, si existe cuando se llama a getCurrentPosition() o watchPosition(), recibe un objeto  PositionError como su primer parámetro.

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

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

Ejemplo de geolocalización

Contenido HTML

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

Contenido JavaScript

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

Resultado

{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}

Compatibilidad entre navegadores

{{ CompatibilityTable() }}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 5 {{CompatGeckoDesktop("1.9.1")}} 9 10.60 5
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico {{CompatUnknown()}} {{CompatUnknown()}} {{CompatGeckoMobile("4")}} {{CompatUnknown()}} 10.60 {{CompatUnknown()}}

Notas sobre Gecko

Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son intercambiados incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y le dirección IP del usuario. Para más información, por favor consulte la Política de Privacidad de Mozilla y la Política de Privacidad de Google, dichos documentos cubren como estos datos pueden ser utilizados.

En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio GPSD para geolocalización en sistemas Linux.

Consultar también

Fuente de la revisión

<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">API de geolocalización</span> <span class="hps">permite al</span> <span class="hps">usuario su</span> <span class="hps">ubicación</span> <span class="hps">a las aplicaciones web</span> <span class="hps">si</span> <span class="hps">así lo desean.</span> <span class="hps">Por razones de privacidad</span><span>,</span> <span class="hps">al usuario</span> <span class="hps">se le pide que</span> <span class="hps">confirme el permiso</span> <span class="hps">para proporcionar información</span> <span class="hps">de ubicación.</span></span></p>
<p>&nbsp;</p>
<h2 id="El_Objetivo_de_la_Geolocalizaci.C3.B3n">El objeto geolocation</h2>
<p><br />
  <span id="result_box" lang="es"><span class="hps">La API</span> <span class="hps">de geolocalización</span> <span class="hps">se publica</span> <span class="hps">a través del objeto</span></span></p>
<p>{{domxref("window.navigator.geolocation","navigator.geolocation")}}.</p>
<p><span id="result_box" lang="es"><span class="hps">Si el objeto existe</span><span>,</span> <span class="hps">los servicios de geolocalización</span> <span class="hps">están disponibles.</span> <span class="hps">Usted puede</span> <span class="hps">comprobar la presencia</span> <span class="hps">de la geolocalización</span> <span class="hps">de esta manera:</span></span></p>
<pre class="brush: js">
if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocaiton IS NOT available */
}
</pre>
<h3 id="Getting_the_current_position">Obteniendo la ubicación actual</h3>
<p><span id="result_box" lang="es"><span class="hps">Para</span> <span class="hps">obtener la ubicación</span> <span class="hps">actual del usuario</span><span>, puede llamar a</span><span class="hps">l método</span></span></p>
<p><span lang="es"><span class="hps atn">{</span><span class="atn">{</span><span>domxref</span> <span class="hps atn">("</span><span>window.navigator.geolocation.getCurrentPosition</span> <span class="hps">()",</span> <span class="hps atn">"</span><span>getCurrentPosition</span> <span class="hps">()")</span><span>}</span><span>}</span><span class="hps">.</span> </span></p>
<p><span lang="es"><span class="hps">Esto inicia</span> <span class="hps">una solicitud asíncrona</span> <span class="hps">para detectar</span> <span class="hps">la posición del usuario</span><span>, y</span> <span class="hps">consulta el</span> <span class="hps">hardware</span> <span class="hps">de posicionamiento para</span> <span class="hps">obtener</span><span class="hps"> información actualizada.</span> </span><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">se determina la posición</span><span>, la función</span> <span class="hps">de callback</span> es<span class="hps"> ejecutada.</span></span><span lang="es"> <span class="hps">Si lo desea,</span> <span class="hps">puede proporcionar otra función de callback</span><span class="hps"> que se</span> <span class="hps">ejecuta si</span> <span class="hps">se produce un error</span><span>.</span> <span class="hps">Un tercer</span> <span class="hps">parámetro</span> <span class="hps">opcional</span><span>, es un</span> <span class="hps">objeto de opciones</span> <span class="hps">donde se puede establecer</span> <span class="hps">la edad máxima de</span> <span class="hps">la</span> <span class="hps">posición devuelta</span><span>,</span> <span class="hps">el tiempo de espera</span> <span class="hps">para una solicitud</span> <span class="hps">y si quiere</span> <span class="hps">una alta precisión</span> <span class="hps">para la posición.</span></span></p>
<div class="note">
  <p><strong>Note:</strong> Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja presición. Es útil si necesita cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
</div>
<pre class="brush: js">
navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});</pre>
<p>Al ejecutar el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.</p>
<h3 id="Watching_the_current_position">Rastreando la posición actual</h3>
<p>Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.</p>
<div class="note">
  <p><strong>Note:</strong> Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
</div>
<pre class="brush: js">
var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});</pre>
<p>El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearPosition()")}} para dejar de rastrear la posición del usuario.</p>
<pre class="brush: js">
navigator.geolocation.clearWatch(watchID);
</pre>
<h3 id="Fine_tuning_reponse">Afinando la respuesta</h3>
<p>Ambos métodos,&nbsp; {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto <code>PositionOptions</code> también opcional.</p>
<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p>
<p>Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:</p>
<pre class="brush: js">
function geo_success(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}

function geo_error() {
  alert("Sorry, no position available.");
}

var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};

var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
<p><a id="fck_paste_padding">Demo de watchPosition: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br />
  <a id="fck_paste_padding"></a></p>
<h2 id="Describing_a_position">Describiendo una posición</h2>
<p>La ubicación del usuario es descrita con un objeto <code>Position</code> referenciando a un objeto <code>Coordinates</code>.</p>
<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p>
<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p>
<h2 id="Handling_errors">Manejo de errores</h2>
<p>La función de callback de error, si existe cuando se llama a <code>getCurrentPosition()</code> o <code>watchPosition()</code>, recibe un objeto&nbsp; <code>PositionError</code> como su primer parámetro.</p>
<pre class="brush: js">
function errorCallback(error) {
  alert('ERROR(' + error.code + '): ' + error.message);
};
</pre>
<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p>
<h2 id="Geolocation_Live_Example">Ejemplo de geolocalización</h2>
<div class="hidden">
  <pre class="brush: css">
body {
  padding: 20px;
  background-color:#ffffc9
}

p { margin : 0; }
</pre>
</div>
<h3 id="HTML_Content">Contenido HTML</h3>
<pre class="brush: html;">
&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Show my location&lt;/button&gt;&lt;/p&gt;
&lt;div id="out"&gt;&lt;/div&gt;
</pre>
<h3 id="JavaScript_Content">Contenido JavaScript</h3>
<pre class="brush: js;">
function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=13&amp;size=300x300&amp;sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "&lt;p&gt;Locating…&lt;/p&gt;";

  navigator.geolocation.getCurrentPosition(success, error);
}
</pre>
<h3 id="Live_Result">Resultado</h3>
<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p>
<h2 id="Browser_compatibility">Compatibilidad entre navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Característica</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Soporte básico</td>
        <td>5</td>
        <td>{{CompatGeckoDesktop("1.9.1")}}</td>
        <td>9</td>
        <td>10.60</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Soporte básico</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatGeckoMobile("4")}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>10.60</td>
        <td>{{CompatUnknown()}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_notes">Notas sobre Gecko</h3>
<p>Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son intercambiados incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y le dirección IP del usuario. Para más información, por favor consulte la&nbsp;<a href="http://www.mozilla.com/en-US/legal/privacy/" title="http://www.mozilla.com/en-US/legal/privacy/">Política de Privacidad de Mozilla</a><span class="external"> y la</span>&nbsp;<a href="http://www.google.com/privacy-lsf.html" title="http://www.google.com/privacy-lsf.html">Política de Privacidad de Google</a>, dichos documentos cubren como estos datos pueden ser utilizados.</p>
<p>En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio <a href="http://catb.org/gpsd/" title="http://catb.org/gpsd/">GPSD</a> para geolocalización en sistemas Linux.</p>
<h2 id="See_also">Consultar también</h2>
<ul>
  <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li>
  <li><a href="http://www.w3.org/TR/geolocation-API/" title="http://www.w3.org/TR/geolocation-API/">API de Geolocalización en w3.org</a></li>
  <li><a href="/en-US/demos/tag/tech:geolocation" title="/en-US/demos/tag/tech:geolocation">Demos que utilizan la API de Geolocalización</a></li>
</ul>
<p><!-- languages({
  "es": "es/Usar_la_Geolocalización"
}) --></p>
Revertir a esta revisión