谷歌地图JavaScript API“地理位置服务失败”在服务器上，但在当地工作

Question

因此，我建立了一个ngrok临时服务器，以显示我的雇主她的网站如何看，但后来发现谷歌地图的Javascript API在ngrok上失败，而在我的本地主机它的工作，这是一些与ngrok怪癖或将它发生时，我们开始在真正的服务器上托管它？ 我有/scripts/js/geolocation.js地理位置和被调用它是/orders.php

geolocation.js页：

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

orders.php：

<div id="map"> 
    <script>initMap()</script> 
</div> 


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

本地主机：

Ngrok：

Answer 1

对于有人可能需要帮助，这藏汉备查：

问题与@AwPa，@RamRaider，@HaythamROUIS的帮助下解决了。 所以问题是，服务器是在http而不是https，你需要做的唯一的事情是（如果你使用ngrok）在网址的开头部署https：//，因为ngrok在http同时，或将您的网络服务器的配置更改为使用HTTPS。

HTTPS上ngrok链接：

重要提示：像@RamRaider说，使用此功能是你获取了使用URL的，最好不要硬编码将要使用的协议一切，做这种方式将使用当前在网站上使用的协议，在这种情况下，https。