Meteor.js反应html5地理位置position.coords

本文介绍了Meteor.js反应html5地理位置position.coords的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是meteor.js nuub，但我确实花了很多时间试图找出这个问题。

我试图根据传递给getCurrentPosition的HTML5地理位置API回调来主动更新我的用户界面。但是，用户界面并未使用当前代码进行更新。

您能提供建议和/或解决方案吗？以下是详细信息：
$ b

基本知识：流星服务器正在运行，通过集合向mongo成功提供其他数据

我有一个主页面（main.html）：

  据我所知 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

COORDS

Meteor.js反应html5地理位置position.coords

问题描述