High accuracy geolocation Html5(高精度地理定位Html5)
问题描述
我正在尝试使用嵌入式 GPS 定位设备(例如应用程序共享位置).我读过 enableHighAccuracy: true
是可能的.
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
.
如何在此代码中设置 enableHighAccuracy: true
?我尝试了不同的位置,但它不起作用.
How can I set enableHighAccuracy: true
in this code? I tried in different positions but it doesn't work.
<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 设置高精度标志.
You need a PositionOptions
object, in which you set the high accuracy flag following the API.
我从这里引用:http://diveintohtml5.info/geolocation.html
getCurrentPosition() 函数有一个可选的第三个参数,a位置选项对象.您可以在其中设置三个属性位置选项对象.所有属性都是可选的.你可以设置任何或全部或没有.
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.");
}
注意到我在 getCurrentPosition
调用中添加了以下 2 个参数:
Noticed I added the following 2 parameters to getCurrentPosition
call:
函数错误(msg){alert('请在未来启用您的GPS定位.');}
当无法获取 GPS 或触发超时时调用此函数.
This function is called when GPS could not be retrieved or the timeout has been triggered.
{maximumAge:10000, timeout:5000, enableHighAccuracy: true});
这些是选项.我们不想要超过 10 秒 (maximumAge:10000
) 的 gps 数据.我们不想等待超过 5 秒的响应 (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
).
另请参阅:Geolocation HTML5 enableHighAccuracy True 、 False 还是 Best Option?
这篇关于高精度地理定位Html5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:高精度地理定位Html5
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01