javascript - Meteor.js 响应式 html5 地理定位 position.coords

标签 javascript html meteor geolocation

我是一个 meteor.js nuub,但我确实花了很多时间来弄清楚这个问题。

我正在尝试根据传递到 getCurrentPosition 的 HTML5 地理定位 API 回调来响应式更新我的 UI。但是,UI 未使用我当前的代码进行更新。

您能提供建议和/或解决方案吗?以下是详细信息:

基础知识: meteor 服务器正在运行,通过集合成功地向/从 mongo 提供其他数据

我有一个主页 (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>

引用模板 (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();
    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()
});

最佳答案

据我所知,navigator.geolocation 不是响应式(Reactive)数据源。因此,如果没有一些明确的轮询,这将无法工作。另一件你弄错的事情是你的助手不是函数,所以它们不能被重复调用。

这可能有效(未测试):

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

关于javascript - Meteor.js 响应式 html5 地理定位 position.coords,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24835925/

相关文章:

javascript - 我想将一个字符串拆分成两个变量

javascript - 如何使用按钮关闭窗口(window.close() 不起作用)?

Javascript (Vue.js) 无法在移动设备和其他连接的设备上运行,但可以在运行本地主机的桌面上运行

html - 在不同的页面大小上隐藏固定宽度的 jquery carousel div 的末端

mongodb - meteor restivus 端点配置

javascript - 在页面加载时使用 Javascript 或 jQuery 删除 div 类

javascript - jquery-select2 显示默认选择的第一个值

javascript - Bootstrap 导航菜单无法正常工作

javascript - 如何使用 Iron-router - Meteor 获取上次/上次访问的路线

javascript - 使用此事件获取 html 元素的宽度