Question

目前我只是将我的网站上的内容上传到测试服务器，如果谷歌地图API工作，它本地是免费的，并向我显示我当前所在的位置。但是，当我将我的网站上传到服务器并修改了所有必要的内容以使一切看起来都很好时，Google Maps API的这一部分就无法正常工作。

谷歌地图api代码：

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 12
        });
        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('Esta es tu ubicacion');
            map.setCenter(pos);


            var icon = {
    url: "vista/multimedia/imagenes/pointer.png", // url
    scaledSize: new google.maps.Size(30, 30), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: 'marker with infoWindow',
                icon: icon
           });
           marker.addListener('click', function() {
               infowindow.open(map, marker);
          });


          }, 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.');
      }

我得到的错误如下：

错误：地理位置服务失败

我不修改脚本的任何内容，保持原样。

放置谷歌地图的代码：

<center><div id="map" style="height:500px;width:900px;margin-top:5%;"></div></center>

使用相应的密钥发送api的代码

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA49iAee5kSTQ-whGT3A77H-PJsK5FzLCk&callback=initMap" async defer></script>

当前结果

Web控制台错误：

[Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

Answer 1

根据您的控制台错误，您将网站托管到http服务器和Google地图，浏览器地理位置API仅适用于https连接。尝试将代码上传到像github页面这样的安全服务器。

Answer 2

该错误与Google地图没有任何关系。它告诉您浏览器上的地理位置API（getCurrentPosition()等）不再支持不安全的HTTP协议。相反，您需要使用安全的HTTPS协议。

这意味着您需要获得您网站的SSL证书。您可以使用Let's Encrypt获取免费的SSL证书。唯一的问题是你必须renew it every few months，但这个过程可以自动完成。

如果您只是测试您的应用程序，并且不介意地址栏中的其他人的域名，则Heroku等托管服务默认为HTTPS。如果应用程序纯粹是前端（仅限HTML，CSS和Javascript），您也可以在AWS S3或Github Pages上托管它们。

只要您托管的网址以https://开头，就不会发生此错误。

Answer 3

在我的情况下，将浏览器权限更改为“允许”有效。当浏览器没有位置访问权限时也会导致相同的错误。

Answer 4

经过努力，加载地图并使用Geolocation服务获取用户位置，每次获取

<块引用>

“地理定位服务失败。”错误，

我尝试将我的代码部署在安全的网络托管上

<块引用>

“GitHub 页面”

并使用 https 服务，一遍又一遍地出现相同的错误

<块引用>

“地理定位服务失败。”！

终于找到问题所在了

<块引用>

它是“桌面谷歌浏览器”！

（我也在 Windows 10 和 8.1 上检查过）（谷歌浏览器是最新的版本 91.0.4472.124（官方版本）（64 位））

之后我访问了我的页面

<块引用>

“微软边缘”，

问题消失了，我可以轻松获取用户的位置，然后我尝试了我手机的 google chrome 浏览器，它也能正常工作！

为什么Google Maps API无法在服务器上运行？ [错误：地理定位服务失败]

4 个答案: