2017-06-21 134 views
0

因此,我建立了一個ngrok臨時服務器,以顯示我的僱主她的網站如何看,但後來發現谷歌地圖的Javascript API在ngrok上失敗,而在我的本地主機它的工作,這是一些與ngrok怪癖或將它發生時,我們開始在真正的服務器上託管它? 我有/scripts/js/geolocation.js地理位置和被調用它是/orders.php谷歌地圖JavaScript API「地理位置服務失敗」在服務器上,但在當地工作

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> 

本地主機: Local:

Ngrok: Ngrok

+2

你看過控制檯嗎?你有沒有收到任何錯誤信息? – Nat

+1

我也建議你從StackOverflow中刪除你的API密鑰,以防萬一有人決定將它用於邪惡。 – Nat

+1

也許,給'geolocation.getCurrentPosition'提供'options'參數以合適的值可能有助於改進結果 - 也可以使用'watchPosition'方法 – RamRaider

回答

1

對於有人可能需要幫助,這藏漢備查:

問題與@AwPa,@RamRaider,@HaythamROUIS的幫助下解決了。 所以問題是,服務器是在http而不是https,你需要做的唯一的事情是(如果你使用ngrok)在網址的開頭部署https://,因爲ngrok在http同時,或將您的網絡服務器的配置更改爲使用HTTPS。

HTTPS上ngrok鏈接: ngrok

重要提示:像@RamRaider說,使用此功能是你獲取了使用URL的,最好不要硬編碼將要使用的協議一切,做這種方式將使用當前在網站上使用的協議,在這種情況下,https。