我是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");
}
答案 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);
});
}
<强>更新强>
根据您的评论,如果您希望将其显示为“直播”,则可以使用以下内容:
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/
参考: