Google 在服务器中映射 javascript API "geolocation service failed" 但在本地工作

Question

所以我设置了一个 ngrok 临时服务器来向我的雇主展示她的网站的外观，但随后注意到 google 地图的 Javascript API 在 ngrok 上失败，而在我的localhost 它正在工作，这是 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>

本地主机：

恩格罗克：

Answer 1

供将来可能需要帮助的人参考：

在@AwPa、@RamRaider、@HaythamROUIS 的帮助下解决了问题。所以问题是服务器是 http 而不是 https，你唯一需要做的就是（如果你使用的是 ngrok）将 https:// 放在 url 的开头，因为 ngrok 同时托管 http 和https，或者更改您的网络服务器的配置以使用 HTTPS。

https link 在 ngrok 上：

重要提示：就像@RamRaider 所说的那样，使用，对使用 URL 获取的所有内容执行此操作，最好不要对将要使用的协议进行硬编码使用，这样做将使用当前在网站上使用的协议，在本例中为 https。

Google 在服务器中映射 javascript API "geolocation service failed" 但在本地工作

Google maps javascript API "geolocation service failed" in server but works on local

javascript

php

google-maps-api-3

ngrok