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

时间:2013-05-10 13:47:58

标签: javascript html5 variables geolocation parameter-passing

我是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");
    }

1 个答案:

答案 0 :(得分:1)

您的代码中有几个奇怪的东西。您的小提琴设置为运行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);
    });
}

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

<强>更新

根据您的评论,如果您希望将其显示为“直播”,则可以使用以下内容:

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>

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

所以这段代码的作用是从window load编辑的时间开始,它不断重新获得地理位置。您可以传递给getCurrentPosition的特殊选项,我在getPositionOptions中声明。

正如我之前所说的那样,getCurrentPosition是异步的,所以在调用getCurrentPosition之后可以随时检索位置......这就是回调的用途。在options对象中,我设置了一个超时 - 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);
};

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

参考: