7
Ich bin ein meteor.js Nuub, aber ich habe ziemlich viel Zeit damit verbracht, diesen herauszufinden.Meteor.js reaktive html5 geolocation position.coords
Ich versuche, meine Benutzeroberfläche basierend auf dem HTML5-Geolocation-API-Callback, der in getCurrentPosition übergeben wurde, reaktiv zu aktualisieren. Die Benutzeroberfläche wird jedoch nicht mit meinem aktuellen Code aktualisiert.
Können Sie Vorschläge und/oder eine Lösung anbieten? Hier sind die Details:
Basics: Meteor-Server ausgeführt wird, dient andere Daten zu/von Mongo über Sammlungen erfolgreich
Ich habe eine Hauptseite (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>
dass Referenzen eine Vorlage (location.js):
<template name="location">
<div>
Lat: {{lat}}
</div>
<div>
Lon: {{lon}}
</div>
</template>
, die diese im Zusammenhang Helfer (location.js) hat:
_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()
});
hinzuzufügen erwarten Sie es zu aktualisieren, wenn sich 'navigator.geolocation.getCurrentPosition' ändert? Wenn das so ist, werden Sie wahrscheinlich eine Deps.autorun benötigen, aber selbst dann bin ich mir nicht sicher, ob Geolocation als reaktive Datenquelle verwendet werden kann. –
Hey Cristian, ja, ich dachte, dass _lat und _lon als reaktive Variablen verwendet werden könnten. Ich dachte an Deps.autorun, aber ich weiß nicht, wo ich es nennen soll. –