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

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证书.唯一的问题是你必须每隔几个月更新一次,但这个过程可以自动完成.

如果您只是测试您的应用程序,并且不介意地址栏中的其他人的域名,默认情况下,Heroku等托管服务是HTTPS.如果应用程序纯粹是前端(仅限HTML,CSS和Javascript),您也可以在AWS S3或Github页面上托管它们.

只要您在托管的URL开始时出现https://此错误就不应该发生.