使用 HTML / JavaScript 查找地理位置 [重复]答案

【问题标题】：Finding Geolocation With HTML / JavaScript [duplicate]使用 HTML / JavaScript 查找地理位置 [重复]
【发布时间】：2016-11-12 03:03:30
【问题描述】：

我正在尝试使用 TheNewBoston 的视频来编写一个具有“获取位置”按钮的网站，并会调出用户位置的 Google 地图。但是，每次我在我的网站上单击“获取位置”时，都没有任何反应。我在玩代码并且能够让地图显示一次，但我无法再次获得该结果并且不知道我是如何让它工作的。不知道我做错了什么？

这是我的代码：

<!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 网络浏览器？如果是这样，请确保您使用https:// 而不是http://，因为谷歌现在只允许在启用 ssl 的页面上定位。最好使用 firefox
是的，你也可以使用旧的 chrome 版本，50 之前的任何版本都可以使用
@Novice - 谢谢！我已经在 Firefox 和 Safari 上打开了该网站，但不幸的是，我仍然没有得到太大的不同。我点击“获取位置”，但没有任何反应。
控制台有错误吗？还要检查return false 我认为它不应该在那里

标签： javascript html geolocation

【解决方案1】：

我对您的代码进行了一些更改，因为某些标签没有关闭/结束，并且调整了 url 以及您提供的 url 不起作用，

<!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-Frame-Options' 设置为 'SAMEORIGIN'。”

【讨论】：

【解决方案2】：

您将无法使用 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>

【讨论】：