我已经实现了以下代码来打印距离当前位置和给定位置的距离。
根据目前的情况，当页面被加载时，然后生成一个超链接，当我点击该URL然后它在不同页面上重定向到我并显示距离结果。
有没有办法在加载时间直接在同一页面上打印结果而不点击任何链接？
<html>
<body onLoad="javascript:showlocation()">
<p id="demo"></p>
<script>
function showlocation()
{
navigator.geolocation.getCurrentPosition(callback);
}
function callback(position)
{
var str = "Free Web Building Tutorials!";
var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+position.coords.latitude+","+position.coords.longitude+"&destinations=london&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw";
document.getElementById("demo").innerHTML = str.link(url);
}
</script>
</body>
</html>
答案 0 :(得分：1)
你应该看看Javascript如何操纵DOM - 添加和删除元素，更改文本和HTML等。我还建议检查JQuery作为原始浏览器javascript往往非常混乱，非常快。强烈建议那些尽可能避免使用图书馆的人。
您可以使用
轻松地在大多数案例中设置窗口的位置window.location = url; // eg, 'https://google.com'
例如，如果我在浏览器中使用file://网址打开此网址，则可以：
<script>
url = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=-93.243956,44.909974&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw'
function setLocation(){
window.location = url;
}
</script>
<body onLoad='setLocation()' >
</body>
这应该与点击匹配的链接基本相同。不幸的是我无法让它在堆栈溢出代码段中工作，但我在本地测试了文件中的内容并且重定向很好。如果它不适合你，我建议发布一个更完整的例子。
如果您想在页面上留下其他内容，您还有一些选择。一些API允许来自AJAX或iframe的调用 - 其他API可能使用身份验证，CORS或其他一些方法来禁止。
从下面的示例中可以看出，Google通过设置相应的标头来禁止这些请求（浏览器控制台会解释显示被阻止）。像谷歌这样的人保护他们的免费API的机制并不常见，他们试图阻止人们重新制作产品或滥用他们的产品。我确定如果您查看您尝试使用的API的文档，它将解释如何为用户验证这些请求。
下面是一个以几种方式操作DOM的示例 - 使用innerHTML，一个vanilla javascript浏览器方法，以及使用JQuery（$是JQuery接口的同义词） - 您将看到远更容易（你可能没看到的是在所有相关的网络浏览器中没有 jquery的事情是多么困难！）。如果您交换URL，您可以看到当URL响应允许浏览器显示它们时命令有效。
function showlocation()
{
//navigator.geolocation.getCurrentPosition(callback);
callback( { coords: { longitude: 44.909974, latitude: -93.243956 } } );
}
function callback(position)
{
var str = "Free Web Building Tutorials!";
var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+position.coords.latitude+","+position.coords.longitude+"&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw";
document.getElementById("demo").innerHTML = str.link(url);
document.getElementById("iframe").src = url;
ajax(url);
}
function ajax(url){
$('#ajaxres').html("Loading...");
$.ajax({
url: url,
success: function(result, status){
$('#ajaxres').html( result );
},
error: function(req, status, msg){
$('#ajaxres').html( "Error! Status: " + status + ", message: <code>"+msg+"</code>, Response: <pre> " + JSON.stringify(req) + "</pre>" );
}
})
}body {
background-color: aquamarine;
}
code:before {
content: "'";
}
code:after {
content: "'";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script>
</script>
</head>
<body onLoad="showlocation();">
<p id="demo"></p>
<p>This won't work because X-Frame-Options header of the response is SAMEORIGIN ( see browser console for errors ). You'll just see an empty box with an ugly 90s border (but ymmv):</p>
<iframe id='iframe'></iframe>
<p>The AJAX also doesn't work because </code> the Access-Control-Allow-Origin header is present on the requested resource</code> ( see console )</p>
<div id='ajaxres'></div>
</body>
</html>