使用HTML/JavaScript查找地理位置

问题描述：

我正在尝试使用TheNewBoston的视频来编码具有“获取位置”按钮的网站，并将拉起用户位置的Google地图。但是，每次我点击我的网站上的“获取位置”时，都不会发生任何事情。我正在玩弄代码，并且能够让地图出现一次，但我无法再次获得该结果，也不知道我是如何运作的。不知道我做错了什么？使用HTML/JavaScript查找地理位置

这里是我的代码：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div> id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com"> 
    </div> 

    <script> 

    var c = function(pos) { 
     var lat = pos.coords.latitude, 
     var long = pos.coords.longitude, 
     var coords = lat + ', ' + long; 

     document.getElementById('google_map').setAttribute('src','https://maps.google.com' + coords + '&z=60&output=embed'); 
    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 

    </script>

使用Chrome Web的浏览器吗？如果是这样，请确保您使用'https：//'而不是'http：//'，因为谷歌现在只允许在启用ssl的页面上定位。更好的方式是使用firefox – Viney

是的，您也可以在版本之前使用较旧的chrome版本50会工作 – Viney

@Novice - 谢谢！我已经在Firefox和Safari上打开了该网站，但不幸的是，我仍然没有太大区别。我点击“获取位置”，但没有任何反应。 – hoshicchi

答

我已经在你的代码中的一些变化一些标签没有关闭/结束，已经调整了网址，以及你给不工作的网址，

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
<title>Location Retriever</title> 
 
</head> 
 

 
<body> 
 
    <a href="#" id="get_location">Get Location</a> 
 
    <div id="map"> 
 
    <iframe id="google_map" 
 
    width="600" 
 
    height="450" 
 
    frameborder="0" style="border:0px" allowfullscreen> 
 
</iframe> 
 
    </div> 
 

 
<script> 
 

 
    var c = function(pos) { 
 
    var lat = pos.coords.latitude, 
 
    long = pos.coords.longitude, 
 
    coords = lat + ', ' + long; 
 

 
document.getElementById('google_map').setAttribute('src','https://maps.google.com/maps/@' + coords + '&z=60'); 
 

 
} 
 

 
document.getElementById('get_location').onclick = function() { 
 

 
navigator.geolocation.getCurrentPosition(c); 
 
return false; 
 

 
} 
 

 
</script> 
 
</body> 
 
</html>

如果您在IE中检查：

您将在iframe中看到“页面未显示”错误，并且会有链接导航到地图。

在谷歌浏览器：

会有在控制台的错误消息：“拒绝在该框架中显示‘https://www.google.com/maps/@12.9732528,%2080.1971449&z=60’，因为它设置‘X-框架 - 选项’到‘SAMEORIGIN’。”

答

您将无法使用maps.google.com。您在控制台中得到的错误是：Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.我想你可能想什么，看看是https://developers.google.com/maps/documentation/embed/

你也有一些小的代码的问题，我有固定的你有什么：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
<title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" 
    scrolling="no" marginheight="0" marginwidth="0" 
    src="https://maps.google.com"></iframe> 
    </div> 

    <script> 
    var c = function(pos) { 
     var lat = pos.coords.latitude, 
      long = pos.coords.longitude, 
      coords = lat + ', ' + long; 

    document.getElementById('google_map').src = 'https://maps.google.com' + coords + '&z=60&output=embed'; 

    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 
    </script> 
</body> 
</html>

使用HTML/JavaScript查找地理位置

相关推荐