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

我对Javascript真的是个新手，我正在尝试跳入它

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

我这里有一个JSFIDLE：

当我运行它时，我在警报框中得到一个“未定义”。有人能帮我吗

这是我的密码：

    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被设置为运行

onLoad

，这意味着您在JavaScript中定义的函数将无法在全局范围内使用-它们将在

窗口中定义。onLoad

处理程序…不会在其外部进行编码以访问它们（尤其是内联事件处理程序）。这是一个完美的例子，说明了为什么不使用内联事件处理程序（尽管问题实际上是由于JSFIDLE设置）

这意味着，当你调用

alert（）

在按钮的内联

单击
处理程序中，它调用本机
window.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（只是为了“模拟”您所说的对话框）：

演示：

参考：



好的，谢谢你。我该如何使它不断“监视”设备的位置，不断更新变量，并在屏幕上的对话框中进行更新（而不制作警报框）？@goldage5我更新了我的答案，告诉你我将如何处理你现在提出的问题。如果你需要知道如何进行对话，你需要在这里问一个新问题。我提供的演示只是假装成一个对话。重要的部分是让地理位置的东西工作，这似乎是正确的工作在小提琴。请确保您观看浏览器的控制台以查看事件的发生（因为我记录了这些事件），好的，谢谢。这对我很有帮助。出于好奇，它得到的坐标的准确度是多少？@goldage5如果你看一下我答案末尾的链接，它提供了很多关于这个功能的信息，包括准确度。例如，您可以查看
position.coords.accurity
以了解坐标的精度（以米为单位）。如果你看看我在第二个例子中使用的
getPositionOptions
对象，你会看到一个
enableHighAccurance
属性-它可以设置为true以使其更精确（但会消耗更多的计算机电量）。@goldage5我真的不知道它是如何为非GPS设备获取位置的，因此在这方面，我不知道：）
<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>

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