javascript - 高精度地理定位 Html5

标签 javascript html google-maps-api-3 geolocation

我正在尝试使用嵌入式 GPS 定位设备(例如 whats app 共享位置)。我读到可以使用 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>

最佳答案

您需要一个 PositionOptions 对象,您可以在其中按照 API 设置高精度标志。

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

所以,它应该像这样工作:

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)。我们不想等待响应超过 5 秒 (timeout:5000),我们希望启用高精度 (enableHighAccuracy: true)。

另见:Geolocation HTML5 enableHighAccuracy True , False or Best Option?

关于javascript - 高精度地理定位 Html5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16202077/

相关文章:

javascript - 如何在 TypeScript (CommonJS) 中只导出一个类(使用另一个类)?

javascript - 使用按钮在 Google map 上添加标记

javascript - google maps api v3 在链接点击时触发街景

javascript - 如何在 Material-UI 中更改选项卡组件的大小?

javascript - 当我点击提交时,它直接进入另一个页面

javascript - 需要将包含img url的Json链接放在<img ng-src中

javascript - Bootstrap 幻灯片上一个和下一个按钮/箭头未显示在中间

html - 使链接使用所有空间

javascript - Google map 引擎 - 在 InfoWindow 上显示路线

javascript - 使用浏览器解释的替代脚本语言而不是 Javascript