meteor.jsリアクティブhtml5ジオロケーションtion.posicoords

Meteor.js reactive html5 geolocation position.coords

出典: link タグ:javascripthtml5meteorgeolocation 更新時間:

  問題

私は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は反応データソースではありません。したがって、これは明示的なポーリングなしでは機能しません。あなたが間違っているもう一つのことは、ヘルパーが機能していないため、繰り返し呼び出すことができないということです。

これはうまくいくかもしれません(テストされていません): 

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

  同じタグがついた質問を見る

javascripthtml5meteorgeolocation
前へ:
次へ: