我对 Javascript 真的很陌生，我正在尝试进入它。
我想让一个脚本获取地理位置数据并将其传递给一个变量，然后将信息显示在警报中。
我在这里有一个 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");
}
您的代码中有几个奇怪的东西。您的 fiddle 设置为 run onLoad，这意味着您在 JavaScript 中定义的函数将无法全局使用 - 它们将在window.onload处理程序中定义......它不会在处理程序之外编写代码来访问它们（尤其是内联事件处理程序）。这是一个完美的例子，说明为什么不使用内联事件处理程序（即使问题确实是因为 jsFiddle 设置）。
这意味着，当您调用alert();按钮的内联click处理程序时，它会调用本机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);
});
}
更新：
根据您的评论，如果您希望它“实时”显示，您可以使用以下内容：
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();
};
使用以下 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>
演示：http: //jsfiddle.net/yJrtR/12/
所以这段代码所做的就是从windowed 开始load，它不断地重新获取地理位置。您可以将一些特殊选项传递给getCurrentPosition我在getPositionOptions.
正如我之前所说，它getCurrentPosition是异步的，因此可以在调用调用后随时检索位置getCurrentPosition……这就是回调的用途。在选项对象中，我设置了一个超时 - 10000- 表示“检索位置的时间不会超过 10 秒”，如果是，它将调用错误回调。该maximumAge选项确保它始终尝试在特定时间段内获取当前位置（而不是使用缓存版本。
因此，当调用任一回调时（可能会在 1 秒后，也可能会在 20 秒后......虽然我们设置了 10 秒的超时时间），它会使用详细信息更新 HTML，然后在 5 秒后再次执行所有操作 -这就是它的setTimeout用途。这是因为如果我们不断尝试获取位置（没有任何延迟），页面将非常忙于获取位置。5 秒延迟，甚至最多 15 秒，应该没问题。
参考：
更新：
该功能有一个特定的方法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);
};
演示：http: //jsfiddle.net/yJrtR/14/
参考：