web-dev-qa-db-fra.com

Géolocalisation haute précision Html5

Je suis tring pour localiser un appareil en utilisant le GPS intégré (comme ce qui est emplacement de partage d'application). J'ai lu que c'était possible avec EnableHighAccuracy: true. 

Comment définir "enableHighAccuracy: true" dans ce code? J'ai essayé dans différentes positions mais ça ne marche pas. 

<script type="text/javascript">
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var coords = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

         var capa = document.getElementById("capa");
         capa.innerHTML = "latitud: " + latitude + " longitud: " + "   aquesta es la precisio en metres  :  " + accuracy;  

            map = new google.maps.Map(
                document.getElementById("mapContainer"), mapOptions
                );
            var marker = new google.maps.Marker({
                    position: coords,
                    map: map,
                    title: "ok"
            });


        });

    }else {
        alert("Geolocation API is not supported in your browser.");
    }

</script>

Merci beaucoup!

javascripthtmlhtml5google-maps-api-3geolocation
15
Francesc VE

Vous avez besoin d'un objet PositionOptions, dans lequel vous définissez l'indicateur de haute précision à la suite de l'API.

Je cite ici: http://diveintohtml5.info/geolocation.html

La fonction getCurrentPosition () a un troisième argument facultatif, un objet PositionOptions. Vous pouvez définir trois propriétés dans un objet PositionOptions. Toutes les propriétés sont facultatives. Vous pouvez définir tout ou partie d'entre eux.

POSITIONOPTIONS OBJECT

Property            Type        Default         Notes
--------------------------------------------------------------
enableHighAccuracy  Boolean     false           true might be slower
timeout             long        (no default)    in milliseconds
maximumAge          long        0               in milliseconds

Donc, ça devrait marcher comme ça:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var coords = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var capa = document.getElementById("capa");
        capa.innerHTML = "latitude: " + latitude + ", longitude: " + ", accuracy: " + accuracy;

        map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
        var marker = new google.maps.Marker({
            position: coords,
            map: map,
            title: "ok"
        });

    },
    function error(msg) {alert('Please enable your GPS position feature.');},
    {maximumAge:10000, timeout:5000, enableHighAccuracy: true});
} else {
    alert("Geolocation API is not supported in your browser.");
}

Remarqué j'ai ajouté les 2 paramètres suivants à getCurrentPosition call:

  1. function error(msg){alert('Please enable your GPS position future.');}

    Cette fonction est appelée lorsque le GPS n'a pas pu être récupéré ou que le délai d'attente a été déclenché.

  2. {maximumAge:10000, timeout:5000, enableHighAccuracy: true});

    Ce sont les options. Nous ne voulons pas de données GPS de plus de 10 secondes (maximumAge:10000). Nous ne voulons pas attendre plus de 5 secondes pour une réponse (timeout:5000) et nous voulons activer une grande précision (enableHighAccuracy: true).

Voir aussi: Géolocalisation HTML5 enableHighAccuracy Vrai, Faux ou Meilleure Option?

24
Menelaos Bakopoulos

Voici un exemple simple de enableHighAccuracy: true extrait du Mozilla Developer Network .

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

navigator.geolocation.getCurrentPosition(success, error, options);
0
jpllosa