将HTML5地理位置数据传递给变量

Question

我真的很陌生，我试图跳到它。

我想要一个脚本获取地理位置数据并将其传递给一个变量，然后将信息显示在警报中。

我有一个的jsfiddle这里：http://jsfiddle.net/yJrtR/

当我运行它，我得到的警告框的“不确定”。有人可以帮我弄这个吗？

这里是我的代码：

function lat() { 

navigator.geolocation.getCurrentPosition(function (position) { 
    var lat = position.coords.latitude; 
    var lon = position.coords.longitude; 
}, function (error) { 
    console.log("Something went wrong: ", error); 
}); 
    } 

    function alert() { 
var lat=""; 
var lon=""; 
lat(); 
alert("lat + lon"); 
    } 

Answer 1

有你的代码的几个奇怪的事情。您的小提琴设置为运行onLoad，这意味着您在JavaScript中定义的功能将不会在全球范围内提供 - 它们将在window.onload处理程序中定义，该处理程序不会在外部编码以访问它们（特别是内联事件处理程序）。这是为什么不是使用内联事件处理程序（即使问题实际上是由于jsFiddle设置）的一个完美例子。

这就是说，当您在按钮的内联click处理程序中调用alert();时，它会调用本机window.alert()函数，该函数将打开一个对话窗口。既然你没有通过它，它显示undefined。它实际上不是调用您创建的alert函数。

此外，由于getCurrentPosition方法似乎是异步的，因此您应该将回调函数传递给lat，以便您可以在获取位置时调用它。

试试这个：

function lat(callback) { 
    navigator.geolocation.getCurrentPosition(function (position) { 
     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 
     callback.call(null, lat, lon); 
    }, function (error) { 
     console.log("Something went wrong: ", error); 
    }); 
} 

function getPosition() { 
    lat(function (latitude, longitude) { 
     alert("lat: " + latitude + ", lon: " + longitude); 
    }); 
} 

http://jsfiddle.net/yJrtR/1/

UPDATE：

根据您的评论，如果你想它显示 “活”，你可以使用这样的事情：

window.onload = function() { 
    var latElement = document.getElementById("lat"), 
     lonElement = document.getElementById("lon"), 
     lastUpdatedElement = document.getElementById("last_updated"), 
     getPositionOptions = { 
      enableHighAccuracy: false, 
      timeout: 10000, 
      maximumAge: 0 
     }, 
     getPos = function() { 
      console.log("getPos function called"); 
      navigator.geolocation.getCurrentPosition(function (position) { 
       console.log("Successfully retrieved position: ", position); 
       var coords = position.coords; 

       latElement.innerHTML = coords.latitude; 
       lonElement.innerHTML = coords.longitude; 

       lastUpdatedElement.innerHTML = new Date(position.timestamp); 
       setTimeout(getPos, 5000); 
      }, function (error) { 
       console.log("Something went wrong retrieving position: ", error); 
       setTimeout(getPos, 5000); 
      }, getPositionOptions); 
     }; 

    getPos(); 
}; 

随行NG HTML（只是 “模拟” 你讲的对话）：

<div id="dialog"> 
    <div>Your latitude is: <span id="lat"></span></div> 
    <div>Your longitude is: <span id="lon"></span></div> 
    <div>Last Updated: <small id="last_updated"></small></div> 
</div> 

DEMO：http://jsfiddle.net/yJrtR/12/

那么这段代码是从时间window有load版，它不断地重新获得地理位置。您可以将特殊选项传递给getCurrentPosition，我在getPositionOptions中声明。

正如我之前所说的，getCurrentPosition是异步的，所以在调用getCurrentPosition被调用后，任何时候都可以检索到位置......这就是回调的用途。在选项对象中，我设置了一个超时 - 10000 - 表示“不超过10秒来检索位置”，如果是，它将调用错误回调。 maximumAge选项确保它始终尝试获取当前位置（而不是在某段时间内使用缓存版本。

所以，当任何回调被调用（可能是1秒后，可能是20秒后...虽然我们设置超时10秒），它会更新HTML的细节，然后再做一遍5秒后 - 这就是setTimeout的用途。这是因为如果我们连续试图获得该位置（没有任何延迟），该页面将非常忙于获得该位置。 5秒延迟，甚至15秒，应该没问题。

参考：

• https://developer.mozilla.org/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition

---

UPDATE：

没有为geolocation功能，让您在观看位置的具体方法，称为watchPosition，做正是我想模仿的，但是莫尔高效。你可以试试这个：

window.onload = function() { 
    var latElement = document.getElementById("lat"), 
     lonElement = document.getElementById("lon"), 
     lastUpdatedElement = document.getElementById("last_updated"), 
     watchPositionOptions = { 
      enableHighAccuracy: false, 
      timeout: 10000, 
      maximumAge: 0 
     }; 
    navigator.geolocation.watchPosition(function (position) { 
     console.log("Successfully retrieved position: ", position); 
     var coords = position.coords; 

     latElement.innerHTML = coords.latitude; 
     lonElement.innerHTML = coords.longitude; 

     lastUpdatedElement.innerHTML = new Date(position.timestamp); 
    }, function (error) { 
     console.log("Something went wrong retrieving position: ", error); 
    }, watchPositionOptions); 
}; 

DEMO：http://jsfiddle.net/yJrtR/14/

参考：

• https://developer.mozilla.org/en-US/docs/DOM/window.navigator.geolocation.watchPosition?redirect=no