高精度地理定位Html5

High accuracy geolocation Html5

本文关键字:Html5 定位 高精度      更新时间:2023-09-26

我正在使用嵌入式GPS定位设备(比如whats应用程序共享位置(。我读到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

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

所以,它应该这样工作:

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

    这些是选项。我们不希望gps数据超过10秒(maximumAge:10000(。我们不想等待超过5秒的响应(timeout:5000(,我们希望实现高精度(enableHighAccuracy: true(。

另请参阅:地理位置HTML5启用HighAccuracy True、False或Best Option?

这里有一个来自Mozilla开发者网络的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);
if(navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(position => {
       do_whatever_you_want
},
error => console.log(error),
{enableHighAccuracy: true}
)
}

解释:首先,我检查浏览器是否支持在顶部使用if条件并将整个代码封装在其中的地理定位。如果它存在,我会尝试获取getCurrentPosition,它会返回一个包含坐标等信息的对象。我将该对象称为position。所以如果你想得到latlng

var lt = position.coords.latitude;
var ln = position.coords.longitude;

GetCurrentPosition还接受了更多的参数。第一个是如果它成功运行(然后我尝试获取返回的对象(。第二个是error。我控制台在这里记录了错误。第三个是额外的选择。其中一个选项是enableHighAccuracy。如果设置为true,它将尝试从用户那里获得最准确的位置。