Meteor.js反应html5地理位置position.coords [英] Meteor.js reactive html5 geolocation position.coords
问题描述
我是meteor.js nuub，但我确实花了很多时间试图找出这个问题。
我试图根据传递给getCurrentPosition的HTML5地理位置API回调来主动更新我的用户界面。但是，用户界面并未使用当前代码进行更新。
您能提供建议和/或解决方案吗？以下是详细信息：
$ b
基本知识：流星服务器正在运行，通过集合向mongo成功提供其他数据
我有一个主页面（main.html）：
< head>
< title> Geolocation< / title>
< / head>
< body>
< div class =container>
< header class =navbar>
< div class =navbar-inner>
< a class =brandhref =/>地理定位< / a>
< / div>
< / header>
< div id =locationDemo>
{{>位置}}
< / div>
< / div>
< / body>
引用模板（location.js）：
< template name =location>
< div>
Lat：{{lat}}
< / div>
< div>
Lon：{{lon}}
< / div>
< / template>
有这个关联的帮助器（location.js）：
_lat = {
current：0，
dep：new Deps.Dependency，
get：function（）{
this.dep.depend（）;
if（this.current === 0）{
getLocation（）;
}
return this.current;
}，
set：function（value）{
this.current = value;
this.dep.changed（）;
Deps.flush（）;
返回this.current;
}
};
_lon = {
current：0，
dep：new Deps.Dependency，
get：function（）{
this.dep.depend（ ）;
if（this.current === 0）{
getLocation（）;
}
return this.current;
}，
set：function（value）{
this.current = value;
this.dep.changed（）;
Deps.flush（）;
返回this.current;
}
};
函数getLocation（）{
if（navigator.geolocation）
{
navigator.geolocation.getCurrentPosition（showPosition，showError）;
}
else {
console.log（此浏览器不支持地理定位。）;
function showPosition（position）
{
_lat.set（position.coords.latitude）;
_lon.set（position.coords.longitude）;
}
function showError（error）{
switch（error.code）{$ b $ case case.PERMISSION_DENIED：
console.log（User denied请求地理位置。
休息;
case error.POSITION_UNAVAILABLE：
console.log（Location information is unavailable。）;
休息;
case error.TIMEOUT：
console.log（请求获取用户位置超时。）;
休息;
case error.UNKNOWN_ERROR：
console.log（发生未知错误。）;
休息;
Template.location.helpers（
lat：_lat.get（），
lon：_lon.get（）
}）;
据我所知 navigator.geolocation 不是被动数据源。所以没有一些明确的轮询，这是行不通的。另一件你错误的是你的助手不是函数，所以他们不能被重复调用。
这可能工作（未测试）：
p> Meteor.setInterval（function（）{
navigator.geolocation.getCurrentPosition（function（position）{
Session .set（'lat'，position.coords.latitude）;
Session.set（'lon'，position.coords.longitude）;
}）;
}，5000）;
Template.location.helpers（{
lat：function（）{return Session.get（'lat'）;}，
lon：function（）{return Session。 get（'lon'）;}
}）;
I'm a meteor.js nuub, but I did spend quite a bit of time trying to figure this one out.
I'm trying to reactively update my UI based on the HTML5 geolocation API callback passed into getCurrentPosition. However, the UI is not updating with my current code.
Can you offer suggestions and/or a solution? Here are the details:
Basics: meteor server is running, serving other data to/from mongo via collections successfully
I have a main page (main.html):
<head>
<title>Geolocation</title>
</head>
<body>
<div class="container">
<header class="navbar">
<div class="navbar-inner">
<a class="brand" href="/">Geolocation</a>
</div>
</header>
<div id="locationDemo">
{{> location}}
</div>
</div>
</body>
that references a template (location.js):
<template name="location">
<div>
Lat: {{lat}}
</div>
<div>
Lon: {{lon}}
</div>
</template>
that has this associated helper (location.js):
_lat = {
current: 0,
dep: new Deps.Dependency,
get: function(){
this.dep.depend();
if(this.current === 0){
getLocation();
}
return this.current;
},
set: function(value){
this.current = value;
this.dep.changed();
Deps.flush();
return this.current;
}
};
_lon = {
current: 0,
dep: new Deps.Dependency,
get: function(){
this.dep.depend();
if(this.current === 0){
getLocation();
}
return this.current;
},
set: function(value){
this.current = value;
this.dep.changed();
Deps.flush();
return this.current;
}
};
function getLocation(){
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else{
console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position)
{
_lat.set(position.coords.latitude);
_lon.set(position.coords.longitude);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.log("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
console.log("Location information is unavailable.");
break;
case error.TIMEOUT:
console.log("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
console.log("An unknown error occurred.");
break;
}
}
Template.location.helpers({
lat: _lat.get(),
lon: _lon.get()
});
As far as I know navigator.geolocation is not a reactive data source. So this won't work without some explicit polling. Another thing that you've got wrong is that your helpers are not functions, so they couldn't be called repeatedly.
This might work (not tested):
Meteor.setInterval(function() {
navigator.geolocation.getCurrentPosition(function(position) {
Session.set('lat', position.coords.latitude);
Session.set('lon', position.coords.longitude);
});
}, 5000);
Template.location.helpers({
lat: function() { return Session.get('lat'); },
lon: function() { return Session.get('lon'); }
});
这篇关于Meteor.js反应html5地理位置position.coords的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
