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

关键词：

【中文标题】谷歌在服务器中映射 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 谢谢，我会将其添加到我的代码中，并将其添加到答案中。

谷歌在 Android 上使用集群映射自定义标记图标

】谷歌在Android上使用集群映射自定义标记图标【英文标题】：GooglemapscustommarkericonwithclusteringonAndroid【发布时间】：2016-11-2106:06:48【问题描述】：我已经实现了GoogleMapsClustering的代码这是我活动中的代码privatevoidsetUpClusterer()mCluster... 查看详情

防止谷歌在Angular2中自动填写表格[重复]

...】：我们有一个配置页面，用户可以在其中配置电子邮件服务器。由于某种原因，chrome开始自动填充随机字段。我们尝试使用随机字符串添加名称属性或id属性，但谷歌仍会自动填充这些字段。我们的字段是这样的<d 查看详情

谷歌在谷歌浏览器中阻止了网站/域

】谷歌在谷歌浏览器中阻止了网站/域【英文标题】：Website/domainbeingblockedbygoogleinGoogleChrome【发布时间】：2018-10-1518:33:50【问题描述】：几天以来，我们在一个名为“id-validation.us”的域中遇到了问题。谷歌在从谷歌浏览器浏览时... 查看详情

谷歌在rails中的动态地图

】谷歌在rails中的动态地图【英文标题】：googledynamicmapsinrails【发布时间】：2014-03-1407:31:55【问题描述】：我正在使用GeocoderGem来生成位置的地理位置[纬度、经度]。我在http://maps.google.com/maps/api/staticmap?size=850x300&sensor=false&zo... 查看详情

pjzhang:谷歌在中国大陆可以使用的部分服务

猫宁！！！参考链接：https://lusongsong.com/reed/170.htmlhttps://www.williamlong.info/archives/2124.htmlhttps://www.williamlong.info/archives/2150.htmlhttps://zhuanlan.zhihu.com/p/42273894 谷歌在中国大陆依然提供很多服务，尤 查看详情

谷歌在搜索结果中以不同方式显示网站标题

】谷歌在搜索结果中以不同方式显示网站标题【英文标题】：Googledisplayingwebsitetitledifferentlyinsearchresults【发布时间】：2014-02-1815:45:48【问题描述】：Google以不同的方式显示我网站的页面标题。页面标题应该是：平面设计师布莱顿... 查看详情

为啥谷歌在我得到的美元上花了 0.3 [关闭]

】为啥谷歌在我得到的美元上花了0.3[关闭]【英文标题】：Whydoesgoogletook0.3onthedollariget[closed]为什么谷歌在我得到的美元上花了0.3[关闭]【发布时间】：2020-05-2507:46:50【问题描述】：嗨，我开发了一个新应用，并使用anjlab库在其中... 查看详情

如何在 Maps Javascript api 中制作谷歌标记？ [关闭]

】如何在MapsJavascriptapi中制作谷歌标记？[关闭]【英文标题】：HowcanImakeagooglemarkerinMapsJavascriptapi?[closed]【发布时间】：2020-11-2715:47:52【问题描述】：我正在研究googlemapsapi。地图通过鼠标单击显示纬度和经度事件。现在我想做一个... 查看详情

谷歌在以色列的路口装上了ai红绿灯

内容一览：谷歌在近期发布的介绍可持续发展项目的博客和视频中，介绍了在以色列几个城市中安装了AI交通灯，是如何减少汽车空转造成的污染和能源消耗的，以及如何通过AI交通灯减少了路口的拥堵。关键词&#x... 查看详情

java示例代码_将经纬度传递给谷歌地图JavaScript API v3方向服务

java示例代码_将经纬度传递给谷歌地图JavaScript API v3方向服务 查看详情

在谷歌地图javascript api中 - 如何移动地图而不是标记

】在谷歌地图javascriptapi中-如何移动地图而不是标记【英文标题】：Ingooglemapsjavascriptapi-howtomovemapnotmarker【发布时间】：2022-01-2405:56:38【问题描述】：目前我有一个小项目需要使标记静态并将地图移动到地图上的标记显示-我希望... 查看详情

谷歌在以色列的路口装上了ai红绿灯

导读：谷歌在近期发布的介绍可持续发展项目的博客和视频中，介绍了在以色列几个城市中安装了AI交通灯，是如何减少汽车空转造成的污染和能源消耗的，以及如何通过AI交通灯减少了路口的拥堵。作者：神... 查看详情

谷歌在python发送邮件的smtp问题，怎么解决

参考技术A在开启smtp功能时会给你串随机的密码，用这个作为你的登录密码就可以了。btw，帐号只需输入号就可以了。 查看详情

谷歌在 NestJS 后端使用 PassportStrategy 登录无法由 React WebApp 调用

】谷歌在NestJS后端使用PassportStrategy登录无法由ReactWebApp调用【英文标题】：GoogleloginwithPassportStrategyinNestJSbackendnotworkingcalledbyReactWebApp【发布时间】：2021-05-2020:21:25【问题描述】：我已经在NestJS后端使用PassportStrategy实现了Google登... 查看详情

移动谷歌地图中心javascript api

】移动谷歌地图中心javascriptapi【英文标题】：Movegooglemapcenterjavascriptapi【发布时间】：2012-09-2320:07:18【问题描述】：在我的项目中，我想将地图中心移动到新坐标。这是我的地图代码functioninitialize()varmapOptions=center:newgoogle.maps.LatL... 查看详情

如何使用 Google Maps JavaScript API v3 在谷歌地图中获取查看区域中心的坐标

】如何使用GoogleMapsJavaScriptAPIv3在谷歌地图中获取查看区域中心的坐标【英文标题】：howtogetcoordinatesofthecenteroftheviewedareaingooglemapsusingGoogleMapsJavaScriptAPIv3【发布时间】：2012-04-0607:49:50【问题描述】：如何使用javascriptGoogleMapsJavaScrip... 查看详情

使用谷歌一键式javascript API时如何定义变量谷歌

】使用谷歌一键式javascriptAPI时如何定义变量谷歌【英文标题】：howtodefinevariablegooglewhenusinggoogleonetapjavascriptAPI【发布时间】：2021-03-2121:30:04【问题描述】：我正在关注此文档googleonetapsignin在我的react应用中实现谷歌一键登录。我... 查看详情

Android中的谷歌地图签名api密钥错误

】Android中的谷歌地图签名api密钥错误【英文标题】：GooglemapsignedapikeyerrorsinAndroid【发布时间】：2011-11-0922:06:30【问题描述】：当我从调试映射密钥切换到签名映射密钥时，我的映射停止工作。我在logcat中收到以下错误：09-0318:18:... 查看详情