为什么 Geolocation HTML5 getCurrentPosition() 在谷歌地图上不起作用？答案

【问题标题】：Why Geolocation HTML5 getCurrentPosition() is not working on Google Map?为什么 Geolocation HTML5 getCurrentPosition() 在谷歌地图上不起作用？
【发布时间】：2017-07-18 04:57:46
【问题描述】：

这是我在 javascript 文件下运行时遇到的错误

getCurrentPosition() 和 watchPosition() 不再适用于不安全的来源。要使用此功能，您应该考虑将应用程序切换到安全源，例如 HTTPS。有关详细信息，请参阅 https。

这是我的 javascript 文件

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4HSRrQSje--aI6ImtJF30s5ezaUWxsow&libraries=places"></script>

<script>
function getLocation()
    {
      console.log("In geolocation");
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
       else
       {
        print("Browser doesn't support geolocation");
       }

 function showPosition(position)
    {
        console.log("in show position");
        dest_lat=position.coords.latitude;
        dest_long=position.coords.longitude;

        url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ dest_lat + ',' + dest_long + '&sensor=false';
         $.get(url, function(data)
          {
                  if (data.status == 'OK')
                   {
                      map.setCenter(data.results[0].geometry.location);                
                          console.log("Dragaed lat "+marker.getPosition().lat());
                          console.log("Dragged lng "+marker.getPosition().lng());
                          console.log("Address "+data.results[0].formatted_address);
                   }
              });
    }
</script>
</head>
<body>
<input type="button" value="LocateMe" onclick="getLocation();"/>
</body>
</html>

【问题讨论】：

报错信息很清楚，有什么不明白的地方？您不能在不是通过 https 提供的页面上使用这些功能。
嘿！宝。我可以看到错误。我能够理解它。但是我在解决它时遇到了问题。最后，我想通了。只是我是网络编程的新手。谢谢。
我相信它应该在localhost 中工作，因为它被视为安全的。至少在谷歌浏览器中。

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

你必须把它放在一个带有https://的服务器上！

如果您使用的是 Visual Studio，您可以配置为与 https:// 共进午餐，请参阅：https://dotnetcodr.com/2015/09/18/how-to-enable-ssl-for-a-net-project-in-visual-studio/ 或者，您可以在 jsfiddler 上对其进行测试，默认情况下使用 https。

除了你的代码还有很多其他错误。

括号不匹配
map 对象未在您的示例中定义
没有声明变量（它们被添加到全局命名空间中，这可能会在以后导致一些非常严重的问题，并且在您使用 "use strict" 时会引发错误）

这是 jsfiddle 的一个工作示例：https://jsfiddle.net/3gkkvs50/ （stackoverflow 不使用 https 作为示例）

HTML：

<input type="button" value="LocateMe" onclick="getLocation();" />

JS：

function getLocation() {
  console.log("In geolocation");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    print("Browser doesn't support geolocation");
  }
}

function showPosition(position) {
  console.log("in show position");
  var dest_lat = position.coords.latitude;
  var dest_long = position.coords.longitude;

  var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + dest_lat + ',' + dest_long + '&sensor=false';
  $.get(url, function(data) {
    alert(JSON.stringify(data));
  });
}

【讨论】：

这对我有用，我也清楚地了解了问题和解决方案。谢谢斯特凡。