web-dev-qa-db-ja.com

高精度の地理位置情報HTML5

埋め込まれたGPS(whats app share locationなど)を使用してデバイスを見つけるのに苦労しています。これはenableHighAccuracy: trueで可能であると読みました。

このコードに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>
18
Francesc VE

APIに従って高精度フラグを設定するPositionOptionsオブジェクトが必要です。

私はここから引用しています: http://diveintohtml5.info/geolocation.html

GetCurrentPosition()関数には、オプションの3番目の引数であるPositionOptionsオブジェクトがあります。 PositionOptionsオブジェクトで設定できるプロパティは3つあります。すべてのプロパティはオプションです。これらのいずれかまたはすべてを設定することも、まったく設定しないこともできます。

_POSITIONOPTIONS OBJECT

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

したがって、次のように機能するはずです。

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

getCurrentPosition呼び出しに次の2つのパラメーターを追加したことに注意してください。

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

    この関数は、GPSを取得できなかった場合、またはタイムアウトがトリガーされた場合に呼び出されます。

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

    これらはオプションです。 10秒より古いGPSデータは必要ありません(_maximumAge:10000_)。応答(_timeout:5000_)を5秒より長く待つ必要はなく、高精度(_enableHighAccuracy: true_)を有効にします。

以下も参照してください Geolocation HTML5 enableHighAccuracy True、False、またはBest Option?

27

Mozilla Developer Network から取得したenableHighAccuracy: trueの簡単な例を次に示します。

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);
1
jpllosa