Question

我想在本地环境中通过谷歌地图api在这里显示地图。我使用了google api地理位置示例

我已成功在IE中显示地图，但我无法在Google Chrome中显示它。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API KEY&signed_in=true&callback=initMap"
        async defer>
    </script>
  </body>
</html>

＆＃13;

我向您显示以下错误消息。

enter image description here

Answer 1

我认为您使用的是谷歌Chrome浏览器版本50或更高版本。而且你也试图从HTTP网址调用代码，即http://192.168.33.10。自2016年4月20日起，Google已从Chrome版本50.0开始，从非安全资源中删除了对Geo Location API的访问权限。因此，如果您要执行该代码，则您的网址应为https。不过，如果您只想暂时在Chrome浏览器上测试代码，请使用低于50.0的Chrome浏览器版本，它应该可以正常使用。以下是宣布此更改的Google通知链接https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=en。请告诉我，如果这有助于你:)

Answer 2

错误说明了一切。 http和https协议不匹配。尝试我的程序如何成功运行这些Map示例。由于我的本地服务器，我能够测试每个Map JS样本。

如何在本地环境中运行任何Google Map JS示例

确保您的计算机中安装了Python。
在您的终端中运行this command：

python -m SimpleHTTPServer 8000

＆＃39;在0.0.0.0端口8000上提供HTTP ...＆＃39; 表示您已准备好本地服务器。
转到Google Developer Console。在您使用的相同API密钥凭据下注册http://localhost:8000作为网址来源。（它至少需要5分钟才能生效）
在多功能框/地址栏中运行您的Google地图文件，例如http://localhost:8000/geolocation.html。

希望这有帮助。

谷歌api地理定位样本安全错误

2 个答案: