codepenでjavascript - geolocationが動作しない

Question

私はcodepenで簡単な天気アプリを実装しようとしています。アプリはlocalhost上でうまく動作します navigator.geolocationの使用を許可するかどうか尋ねられ、受け入れられた場合は天気が表示されます。 しかし、codepenでは許可を求めることさえありません。 codepenは許可を求めるされていない理由

ここにここのリンク

http://codepen.io/asamolion/pen/BzWLVe

は、JS関数は

function getWeather() { 
    'use strict'; 
    $('#getWeatherButton').hide(); 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var url = 'http://api.openweathermap.org/data/2.5/weather?APPID=53ac88144e6ee627ad0ed85277545ff9'; 
      //   var url = 'example.js'; 
      var apiCall = url + '&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude; 
      //   window.location.href = apiCall; 
      $.getJSON(apiCall, function (json) { 
       setSkycon(parseInt(json.weather[0].id, 10)); 
       $('#location').html(json.name + ', ' + json.sys.country); 
       var temp = (Math.round((json.main.temp - 273.15) * 100)/100); 
       $('#temp').html(temp + '<span id="degree">&deg;</span><span id="FC" onclick="convert()">C</span>'); 
       $('#condition').html(json.weather[0].main); 
      }); 

     }); 
    } 
}; 

です誰も教えてもらえますか？ Chromeのコンソールによれば

Answer 1

：

getCurrentPosition（）およびwatchPosition（）は安全でない起源に推奨されていません。この機能を使用するには、アプリケーションをHTTPSなどの安全な起点に切り替えることを検討する必要があります。

詳細はこちらhttps://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins Chromeは基本的にHTTPS経由で位置情報を送信したいだけです。しかし、開発者がテストするためには、それが安全なネットワークであるかのようにlocalhostを扱います。お役に立てれば！

Answer 2

私は同じ問題で同じ問題を抱えていました。 HTTPの代わりにhttpsを使用してcodepenを単に追加しても問題ありません。このよう

：Chromeで

navigator.geolocation.getCurrentPosition(); 

：

https://codepen.io/crownedjitter/pen/AXzdvQ

あなたがこれを使用する場合。

Answer 3

ChromeはChrome 50から、安全でないプロトコルでジオロケーションをサポートしなくなりました。 https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only