谷歌在服务器中映射 javascript API“地理定位服务失败”，但在本地工作

Posted 2023-04-18

【中文标题】谷歌在服务器中映射 javascript API“地理定位服务失败”，但在本地工作

【英文标题】：Google maps javascript API "geolocation service failed" in server but works on local

【发布时间】：2017-11-24 06:38:00

【问题描述】：

所以我设置了一个 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>

本地主机：

恩格罗克：

【问题讨论】：

你在控制台看了吗？您收到任何错误消息吗？

我还建议您从 *** 中删除您的 API 密钥，以防有人决定将其用于作恶。

也许，为 geolocation.getCurrentPosition 提供合适的值的 options 参数可能有助于改善结果 - 同样使用 watchPosition 方法也可能有用

我不确定是不是这个原因，但是您是否在您的 google 开发者帐户中激活了 google maps javascript api？

我认为问题在于您的 google api 密钥仅限于您的 localhost 域，您可以在您的开发者帐户中验证允许的域，并添加您使用 ngrok 使用的域

【参考方案1】：

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

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

ngrok 上的 https 链接：

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

【讨论】：

您可能会发现在没有协议的情况下使用 <script src='//maps.googleapis.com/maps... 会很有帮助，这样远程资源就会在本地服务器上为相关页面加载当前协议

@RamRaider 谢谢，我会将其添加到我的代码中，并将其添加到答案中。