1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: Uso de geolocalización
slug: Web/API/Geolocation_API
tags:
- API
- Geolocalización
- Guía
- clearWatch
- watchPosition
translation_of: Web/API/Geolocation_API
original_slug: WebAPI/Using_geolocation
---
<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p>
<p><span id="result_box" lang="es"><span class="hps">La</span> <strong><span class="hps">API de geolocalización</span></strong> <span class="hps">permite al</span> <span class="hps">usuario compartir 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 desea.</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>
<h2 id="El_objeto_geolocation">El objeto geolocation</h2>
<p><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>{{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">Se 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) {
/* la geolocalización está disponible */
} else {
/* la geolocalización NO está disponible */
}
</pre>
<h3 id="Obtención_de_la_ubicación_actual">Obtención de la ubicación actual</h3>
<p><span 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="atn hps">l método </span></span>{{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}<span lang="es"><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>, se ejecuta la función</span> <span class="hps">de callback</span><span class="hps">.</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 se requiere</span> <span class="hps">una alta precisión</span> <span class="hps">para la posición.</span></span></p>
<div class="note">
<p><strong>Nota:</strong> Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil 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) {
haz_algo(position.coords.latitude, position.coords.longitude);
});</pre>
<p>En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.</p>
<h3 id="Rastreando_la_posición_actual">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>Nota:</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()","clearWatch()")}} para dejar de rastrear la posición del usuario.</p>
<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
</pre>
<h3 id="Afinando_la_respuesta">Afinando la respuesta</h3>
<p>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 <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="Describiendo_una_posición">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="Manejo_de_errores">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 <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="Ejemplo_de_geolocalización">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="Contenido_HTML">Contenido HTML</h3>
<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>
</pre>
<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
<pre class="brush: js;">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);
}
</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p>
<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
{{Compat("api.Geolocation")}}
<h2 id="Consultar_también">Consultar también</h2>
<ul>
<li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li>
<li><a href="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> </p>
|
