Obtener la ubicación del GPS desde el navegador web

164

Estoy desarrollando un sitio web basado en dispositivos móviles, allí he integrado Google Maps, necesito llenar el campo 'De' de Google Maps dinámicamente.

¿Es posible obtener la ubicación GPS del navegador web y completarla en el campo 'De' de un mapa de Google de forma dinámica?

Ganesh
fuente
2
¿Qué móviles piensas apoyar?
Rowland Shaw
Quiero admitir todos los navegadores móviles, pero el i-phone es la máxima prioridad
Ganesh el
Puede que sea mejor escribir una aplicación nativa, ya que permitirá una integración más estrecha con el hardware, donde esté disponible
Rowland Shaw,
16
Si la necesidad es solo con respecto a la ubicación, entonces una aplicación nativa es demasiado exagerada. iOS no es el único móvil, es solo una prioridad.
Gonçalo Veiga
1
github.com/onury/geolocator
Onur Yıldırım

Respuestas:

194

Si usa la API de geolocalización , sería tan simple como usar el siguiente código.

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

También puede utilizar la API de ubicación del cliente de Google .

Este problema se ha discutido en ¿Es posible detectar la ubicación GPS de un navegador móvil? y Obtener datos de posición del navegador móvil . Puedes encontrar más información allí.

dochoffiday
fuente
¿Todavía se menciona la API de ubicación del cliente de Google? El enlace proporcionado va a Google Loader
Shane N
1
No lo veo en esa página como una de las API disponibles. - Puede utilizar la API de Google Latitude: code.google.com/apis/latitude - Con esto es posible obtener la ubicación actual del cliente: code.google.com/apis/latitude/v1/…
dochoffiday
1
Para futuros lectores, la precisión se mide en metros .
johnnyRose
Hyy, ¿podemos habilitar la ubicación para compartir automáticamente a través de la codificación
Sr. Tomar
2
¿Esto solicita el uso de su ubicación?
Jack
21

Para dar una respuesta un poco más específica. HTML5 le permite obtener las coordenadas geográficas, y hace un trabajo bastante decente. En general, el soporte del navegador para la geolocalización es bastante bueno, todos los principales navegadores excepto ie7 y ie8 (y opera mini). IE9 hace el trabajo pero tiene el peor desempeño. Pagar caniuse.com:

http://caniuse.com/#search=geol

También necesita la aprobación de su usuario para acceder a su ubicación, así que asegúrese de verificar esto y dar algunas instrucciones decentes en caso de que esté apagado. Especialmente para Iphone activar permisos para Safari es un poco engorroso.

Tosh
fuente
dotnetcurry.com/aspnet-mvc/782/… es una referencia útil para la implementación en el entorno asp.net mvc
Walter de Jong
13

Use esto, y encontrará toda la información en http://www.w3schools.com/html/html5_geolocation.asp

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>
Ema.H
fuente
1
Solo una nota: getCurrentPosition () y watchPosition () ya no funcionan en orígenes inseguros. Para usar esta función, debe considerar cambiar su aplicación a un origen seguro, como HTTPS.
user2589273
4

Ahí está el API GeoLocation , pero la compatibilidad del navegador es bastante escasa en la actualidad. La mayoría de los sitios que se preocupan por tales cosas usan una base de datos GeoIP (con las condiciones habituales sobre la inexactitud de dicho sistema). También puede consultar los servicios de terceros que requieren la cooperación del usuario, como FireEagle .

Quentin
fuente
1
Muchas gracias por su rápida respuesta. si es posible, ¿me puede dar más consejos ...
Ganesh
2

Observable

/*
  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);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
robert king
fuente
1

Usemos las últimas funciones de flecha gorda :

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})
Zameer
fuente