High accuracy geolocation Html5

前端 未结 2 921
轮回少年
轮回少年 2020-12-08 01:19

I am tring to locate a device using the embedded GPS (like whats app share location). I\'ve read that it is possible with enableHighAccuracy: true.

How

2条回答
  •  独厮守ぢ
    2020-12-08 02:01

    You need a PositionOptions object, in which you set the high accuracy flag following the API.

    I am quoting from here: http://diveintohtml5.info/geolocation.html

    The getCurrentPosition() function has an optional third argument, a PositionOptions object. There are three properties you can set in a PositionOptions object. All the properties are optional. You can set any or all or none of them.

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

    So, it should work like this:

    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.");
    }
    

    Noticed I added the following 2 parameters to getCurrentPosition call:

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

      This function is called when GPS could not be retrieved or the timeout has been triggered.

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

      These are the options. We don't want gps data that is older than 10 seconds (maximumAge:10000). We don't want to wait longer than 5 seconds for a response (timeout:5000) and we want to enable high accuracy (enableHighAccuracy: true).

    Also see: Geolocation HTML5 enableHighAccuracy True , False or Best Option?

提交回复
热议问题