Html 高精度地理定位 Html5

High accuracy geolocation Html5

提问by Francesc VE

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.

我正在尝试使用嵌入式 GPS 定位设备（例如应用程序共享位置）。我已经读到可以使用enableHighAccuracy: true.

How can I set enableHighAccuracy: truein this code? I tried in different positions but it doesn't work.

如何enableHighAccuracy: true在此代码中设置？我尝试了不同的位置，但它不起作用。

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

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

</script>

回答by Menios

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

您需要一个PositionOptions对象，您可以在其中设置 API 之后的高精度标志。

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

我从这里引用：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.

getCurrentPosition() 函数有一个可选的第三个参数，一个 PositionOptions 对象。您可以在 PositionOptions 对象中设置三个属性。所有属性都是可选的。您可以设置任何或全部或不设置任何一个。

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 getCurrentPositioncall:

注意到我添加了以下 2 个参数来getCurrentPosition调用：

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).

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

   当无法检索 GPS 或已触发超时时调用此函数。

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

   这些是选项。我们不想要超过 10 秒 ( maximumAge:10000) 的GPS 数据。我们不想等待超过 5 秒的响应 ( timeout:5000)，我们希望启用高精度 ( enableHighAccuracy: true)。

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

另请参阅：Geolocation HTML5 enableHighAccuracy True ， False 还是 Best Option？

回答by jpllosa

Here's a simple example of enableHighAccuracy: truetaken from the Mozilla Developer Network.

这是enableHighAccuracy: true取自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);