javascript - 为什么 Google Maps API 不能在服务器上运行？ [错误 : The Geolocation service failed]

Question

目前我只是将我的网站上的内容上传到测试服务器，如果 google maps 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.');
      }

我得到的错误如下:

Error: The Geolocation service failed

我没有修改脚本的任何内容，它们保持原样。

放置谷歌地图的代码:

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

发送带有相应 key 的 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 map 和浏览器地理定位 API 只能通过 https 连接工作。尝试将您的代码上传到安全服务器，例如 github pages。